回到顶部功能实现

CSS上主要注意的是要把

posiition

设为

fixed

。

无动画的回到顶部功能，使用简单的

a

标签就行

<a href="#" class="top">↑</a>

jquery实现主要使用了

scrollTop()

方法，而且要注意兼容性：

<a href="javascript:;" class="top">↑</a>

jquery事件如下：

$(function () {
//滚动事件
$(window).scroll(function () {
var top = $(this).scrollTop();
if(top>200){
$('.top').stop().fadeIn();
}else{
$('.top').stop().fadeOut();
}

})

//点击事件
$('.top').click(function () {
//body不支持ie，firefox，使用html
$('body,html').stop().animate({scrollTop:0},300);
})

})

JavaScript实现：

window.onload = function () {
var button = document.getElementById("btn");
var timer = null;

var pagelookHeight = document.documentElement.clientHeight;
window.onscroll = function () {
var backtop = document.body.scrollTop || document.documentElement.scrollTop;
if(backtop >= pagelookHeight){
button.style.display = "";
}else{
button.style.display = "none";
}
}

button.onclick = function () {
timer = setInterval(function () {
var backtop = Math.ceil(document.documentElement.scrollTop || document.body.scrollTop);
console.log("backtop "+backtop);
var speed = Math.ceil(backtop / 5);
console.log("speed "+speed);
if(document.documentElement.scrollTop){
document.documentElement.scrollTop -= speed;
}else{
document.body.scrollTop -= speed;
}
if(backtop <= 0){
clearInterval(timer);
}
},30);
}
}

jQuery实现：

此效果来自：back-to-top

也可参考：

http://jsfiddle.net/gilbitron/Lt2wH/

jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');

//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});

//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});

});