主页 > 前端开发 > Html+css > 正文

利用Jquery实现滚动至顶部效果

时间:2014-01-29所属栏目: Html+css 来源: 热度:

利用jquery库的内置函数，实现鼠标滚动，滑块渐显，跟随鼠标滚动的动画效果，站内也曾经介绍过一款插件UItotop动画滚动至顶部功能更加强大，言规正传，大家先来看看效果

Demo

html部分

<a href="#introduction" id="to-top-button">Back to top</a>

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

jquery部分

$('#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类先隐藏，$(window)应用函数scroll,jquery库1.4.3版新增特性。当拉动滚动条，scrollTop（）函数的值夜跟着变换，offset + ($(window).height() - 60),让#to-top-button始终出现在底部。

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

点击#to-top-button，自动滚动到顶部。

jquery扩展

 $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);//滚动到相应抛锚。
                return false;
            }
        }
    });

这样可以实验鼠标点击自动滚动到相应的抛锚

Demo
标签:
相关文章
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）