仿CSDN Blog返回页面顶部功能实现原理及代码
导读：收集整理的这篇文章主要介绍了仿CSDN Blog返回页面顶部功能实现原理及代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 只修改了2个地方： ，返回的速度-->改成了慢慢回去。（原来是一闪而返回） ，返回顶部图标出现...
收集整理的这篇文章主要介绍了仿CSDN Blog返回页面顶部功能实现原理及代码，觉得挺不错的，现在分享给大家，也给大家做个参考。 只修改了2个地方： ，返回的速度--> 改成了慢慢回去。（原来是一闪而返回）
，返回顶部图标出现的时机--> 改成了只要不在顶部就显示出来。（原来是向下滚动500px后才显示）
注意：JS务必要写在 HtML之后；
HTML
复制代码代码如下:@H_512_17@
div id="d-top" style="display:none; ">
a id="d-top-a" href="#" tITle="回到顶部">
img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /> /a>
/div>
Javascript代码
复制代码代码如下:
script tyPE="text/javascript">
$(function(){
VAR d_top=$('#d-top');
document.onscroll=function(){
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop> 500){
if(scrTop> 0){
d_top.show();
} else{
d_top.hide();
}
}
$('#d-top-a').click(function(){
$("html,body").aniMATE({ scrollTop: 0} ,500);
//scrollTo(0,0);
this.blur();
return false;
} );
} );
/script>
CSS样式
复制代码代码如下:
#d-top {
position: fixed;
float: right;
z-index: 10;
right: 10px;
bottom: 40px;
}
#d-top img {
width: 42px;
opacity: 0.3;
}
img {
border: medium none;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 仿CSDN Blog返回页面顶部功能实现原理及代码
本文地址： https://pptw.com/jishu/585213.html