当前位置:首页 > 营销知识 > 网络营销知识 > 正文

如何给页面添加“回到顶部”的按钮?


Data: 2014-10-23
 

第一种:锚点法返回顶部
 
较为简单。也就是利用html自带语法”#“标记锚点,点击锚点即可返回顶部。
 
如在 和</head>前添加一个id:<a id="_top"></a>
 
在 </body>结束前添加 
 
<script type="text/javascript"> 
 
function form_top(){ 
 
document.write('<div id="form_top"><a href="#_top" title="回到顶部"><div class="top_img"></div></a></div>') 
 
 
form_top(); 
 
</script> 
 
当然 top_img 这个样式需要自行喜好添加。缺点:比较粗暴,打开页面即出现,对界面有严格要求的人会介意。


第二种:JS返回顶部
 
在页面的右下角有个【回到顶端】的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子。
 
gotop2..png
 
需要在页面尾部</body>前添加
 
 
//回到顶部js//
 
 
 
<script type="text/javascript"> 
 
function goTop(){ 
 
var _btn = document.getElementById("goTop"); 
 
if (document.documentElement && document.documentElement.scrollTop) { 
 
var _con = document.documentElement; 
 
} else if (document.body) { 
 
var _con = document.body; 
 
 
window.onscroll = set; 
 
_btn.style.left = document.documentElement.scrollWidth/2 + 500 + "px"; 
 
_btn.onclick = function (){ 
 
_btn.style.display = "none"; 
 
window.onscroll = null; 
 
this.timer = setInterval(function() { 
 
_con.scrollTop -= Math.ceil(_con.scrollTop * 0.3); 
 
if (_con.scrollTop == 0) clearInterval(_btn.timer, window.onscroll = set); 
 
},10); 
 
}; 
 
function set() { 
 
_btn.style.display = _con.scrollTop ? 'block': "none"; 
 
 
}; 
 
document.write("<div id=\"goTop\" style=\"font-size:12px; width:20px; height:55px; background:#d18d55; color:#fff; line-height:14px; position:fixed; bottom:30px; display:none; cursor:pointer; text-align:center; padding:5px 0; z-index:1; _position:absolute; _top:expression(eval(patMode && patMode == \'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 30 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 30);\">返<br />回<br />顶<br />部</div>"); 
 
window.onscroll = goTop; // JavaScript Document 
 
</script> 
 
 
 
即可实现你想要的快速回顶部效果。

最新更新文章