点击缓慢滑动返回顶部
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置。
- 使用setinerval实现缓慢返回顶部
//核心js代码
var top=document.getElementById("backTop");
var bottom=document.getElementById("backTop");
top.function(){
//alert(11);
timer=setInterval(function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var ispeed=Math.floor(-scrollTop/6);
console.log(ispeed)
if(scrollTop==0){
clearInterval(timer);
}
document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;
},30)
};
使用添加id=“backTop” 。
- 使用Javascript Scroll函数缓慢返回顶部
function backTop() {
window.scrollBy(0,-100);
scrolldelay=setTimeout('backTop()',100);
if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);
}
使用时“backTopl();”。
- 使用onload加上scroll功能实现缓慢返回顶部
BackTop=function(btnId){
var btn=document.getElementById(btnId);
var page=document.documentElement;
window.set;
btn.function(){
btn.style.display="none";
window.null;
this.timer=setInterval(function(){
page.scrollTop-=Math.ceil(page.scrollTop*0.1);
if(page.scrollTop==0)clearInterval(btn.timer,window.set);
},10);
};
function set(){
btn.style.display=page.scrollTop?'block':"none"}
};
BackTop('backTop');
使用时添加id=“backTop” 。
- 使用jquery插件实现缓慢返回顶部
下载链接(内含说明)
http://www.jq22.com/jquery-info325
js部分:
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100){
$('.actGotop').fadeIn(300);
}else{
$('.actGotop').fadeOut(300);
}
});
$('.actGotop').click(function(){
$('html,body').animate({scrollTop: '0px'}, 800);});
});
- 使用jquery动画缓慢返回顶部
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$("a").click(function(){
$('html,body').animate({'scrollTop':'0'},500,)
})
</script>