Home > DeveloperSection > Forums > JQuery Scroll to top
Ankita Pandey
Ankita Pandey

Total Post:183

Posted on    October-04-2014 3:15 AM

 JQuery JavaScript  JQuery 

 1 Reply(s)
 938  View(s)
Rate this:
how to make scroll to top on page down

Kamlakar Singh
Kamlakar Singh

Total Post:194

Posted on    October-04-2014 3:27 AM

try this code:
javascript code:


    $(function () {


            scrollToTop: function () {

                var _isScrolling = false;

                $("body").append($("<a />")



                                    "href": "#",

                                    "id": "scrollToTop"



                                $("<i />")

                                    .addClass("glyphicon glyphicon-chevron-up active")


                $("#scrollToTop").click(function (e) {


                    $("body, html").animate({ scrollTop: 0 }, 500);

                    return false;


                $(window).scroll(function () {


                    if (!_isScrolling) {


                        _isScrolling = true;


                        if ($(window).scrollTop() > 150) {


                            $("#scrollToTop").stop(true, true).addClass("visible");

                            _isScrolling = false;


                        } else {


                            $("#scrollToTop").stop(true, true).removeClass("visible");

                            _isScrolling = false;













CSS code:


    a.scroll-to-top.visible {filter: alpha(opacity=75);opacity: 0.75;}a.scroll-to-top {background: #1bafe0;border-radius: 7px 7px 0 0;bottom: 0px;color: #FFF;height: 9px;opacity: 0;padding: 13px 0 35px;position: fixed;right: 10px;text-align: center;text-decoration: none;width: 49px;z-index: 1040;}a.scroll-to-top:hover {filter: alpha(opacity=100);opacity: 1;}


Html Code:

<a href="#"><i></i></a>


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


Don't want to miss updates? Please click the below button!

Follow MindStick