JQUERY SCROLL TO TOP

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
 1151  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

      Modified On Apr-05-2018 06:32:10 AM

Answer

NEWSLETTER

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