html页面返回按钮,jquery实现页面返回按钮

如题。

当网页比较长之后，我们需要在页面添加一个返回顶部的功能。这个功能我们实现的方法有很多，例如，可以使用window.scrollTo(0,100)来实现。

如果我要求实现的效果炫一些。

例如，当页面滑动到一定的距离之后再出现这个返回按钮，返回按钮出现与消失要有淡出淡入的效果，来吧，让我用下面这段函数做出这个效果吧：

js代码：

//返回顶部的按钮

$(document).ready(function(){

// 页面向下滚动超过300px时按钮显示，否则隐藏

$(window).scroll(function(){

if($(this).scrollTop()>300){

$('.back-to-top').fadeIn(700);//淡入

} else {

$('.back-to-top').fadeOut(700);//淡入

}

});

// 点击按钮，向上动画滚动

$('.back-to-top').click(function(event){

event.preventDefault();

//利用animate实现缓慢滑动回顶部的功能

$('html,body').animate({scrollTop:0},500);

})

});        html内容

返 回顶 部

        css内容：

.back-to-top {

position: fixed;

bottom: 1em;

right: 9.5em;

background-color: #000;

opacity:0.8;

text-align: center;

padding: 10px 12px;

color: #eee;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

cursor: pointer;

display: none;

z-index:9000;

}

.back-to-top span{

font-size:14px;

font-family:"微软雅黑";

}         实现效果如demo给出的效果所示：