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

Total Post:183

Points:1285
Posted on    October-04-2014 3:15 AM

 JQuery JavaScript  JQuery 
Ratings:


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


Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    October-04-2014 3:27 AM

try this code:
javascript code:

<script>

    $(function () {

        $.extend({

            scrollToTop: function () {

                var _isScrolling = false;

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

                                .addClass("scroll-to-top")

                                .attr({

                                    "href": "#",

                                    "id": "scrollToTop"

                                })

                                .append(

                                $("<i />")

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

                            ));

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

                    e.preventDefault();

                    $("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;

 

                        }

 

                    }

 

                });

            }

        });

 

        $.scrollToTop();

    });

</script>

CSS code:

<style>

    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;}

</style>

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 />

Hello


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

Follow MindStick