JQUERY SCROLL TO TOP

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
 1002  View(s)
Ratings:
Rate this:
how to make scroll to top on page down
  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: JQuery Scroll to top

    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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!