欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

仿CSDN Blog返回页面顶部成果实现道理及代码

发布时间:2016-11-26  编辑:杨雨个人博客网站   点击:   

只修改了2个处所:
,返回的速率-->改成了逐步归去。(原本是一闪而返回)
,返回顶部图标呈现的机缘-->改成了只要不在顶部就表现出来。(原本是向下转动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;
}
本文地址:http://itbyc.com/web/html5/13379.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1