JS实现内容页浮动显示“回顶部、写评论”
最近看到许多博友都在博客内容页添加了浮动显示“回顶部”“写评论”的效果,于是也扒了扒代码,将之分享给大家!
将下面代码保存为“.js”文件,并在你内容页模板的Head区添加调用即可!
//================================================================ // 目的:当页面大于一屏时自动显示浮动回顶部及写评论 // 说明:diffY > 400 当页面滚动到400px时显示,可修改此数字 //================================================================ lastScrollY=0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("full").style.top=parseInt(document.getElementById("full").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; /*if(diffY == 0){document.getElementById("full").style.display = "none"} else{document.getElementById("full").style.display = "block"} }*/ if(diffY > 400){document.getElementById("full").style.display = "block"} else{ document.getElementById("full").style.display = "none"} } //浮动位置调整 suspendcode="<div id=\"full\" style='display:none; width:15px; height:57px; position:absolute; left:50%; top:420px; margin-left:213px; z-index:100; text-align:center;'><a href='#'><img src='https://yangjunwei.com/images/btn_top.gif' border=0 /></a><br><br><a href='#respond'><img src='https://yangjunwei.com/images/btn_comment.gif' border=0 /></a></div>" document.write(suspendcode); window.setInterval("heartBeat()",1);