仿CSDN Blog回到网页页面顶部作用完成基本原理及

日期:2021-02-25 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

只改动了2个地区:
,回到的速率-->改为了渐渐地回去。(原先是1闪而回到)
,回到顶部标志出現的机会-->改为了要是不在顶部就显示信息出来。(原先是向下翻转500px后才显示信息)

留意:JS尽量要写在 Html以后;
HTML

拷贝编码
编码以下:

<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;
}
上一篇:html5完成canvas黑影实际效果示例 返回下一篇:没有了