自动滚动到顶部jquery功能代码

最新推荐文章于 2024-09-27 15:27:45 发布

文少

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量1.2k

点赞数

文章标签： jquery function javascript html url

本文链接：https://blog.csdn.net/wyw308/article/details/7249272

版权

html:
<a href="#introduction" id="to-top-button" οnfοcus="this.blur()">Back to top</a>

css:

#to-top-button{
                width:20px;
                height:50px;
                background:#ccc;
                position:absolute;
                bottom:20px;
                right:20px;
                border-radius:100px;
                text-indent:-9999px;
                z-index:200;
                background:url(images/scrolltop.png) no-repeat;
        }

javascript:

$(document).ready(function() {
$('#to-top-button').hide();
        $(window).scroll(function(){
                var offset = $(document).scrollTop();
                offsetBottom = offset + ($(window).height() - 60);
                if (offset > 1){
                        $('#to-top-button').fadeIn(900);
                        }else{
                        $('#to-top-button').fadeOut(900);       
                        }
                        $('#to-top-button').animate({
                                top: offsetBottom
                                },
                                {
                                        duration:500,
                                        queue:false
                                        });
                });

$('#to-top-button').click(function(){
             $('html,body').animate({scrollTop: $('body').offset().top}, 1000);//滚动到页面顶部
         return false;
        });
});