forum

home / developersection / forums / jquery scroll to top

Ask Question
Anonymous User

Other

I am a content writter !

Follow Message
Can you answer this question?
Answer

1 Answers

Anonymous User

Anonymous User

04-Oct-2014
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

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy