js实现返回顶部与去底部

发布时间:2020-11-24编辑:脚本学堂
本文介绍了js脚本实现返回顶部与去底部效果的一段代码,js实现返回顶部功能比较常见,去底部用到的比较,感兴趣的朋友参考下。

js实现返回顶部与去底部

需要在网页一侧加个 返回顶部、到达底部之类的功能。

以前只知道要用个锚,但点了以后,地址栏后面会带个“#”,显得十分落后和弱智。

可以用JS脚本来实现:

到达顶部:
 

window.scrollTo(0, 0);

到达底部:
 

window.scrollTo(0, 99999);//一般页面长度都不够99999吧?

页侧固定的,不随页面一起滚动区域:
css代码:
 

复制代码 代码示例:
<style type="text/css"> 
#divPanel{position:fixed;top:50px;right:250px;width:20px;height:650px; background-color:#FBDBE6;cursor:pointer;padding:0;font-size:12px;text-align:center;} 
#divNext{height:580px;padding-top:10px;background-color:#FFDFF7;} 
#divGoToBottom{height:60px;margin-top:5px; background-color:#FBaaaa;padding-top:10px;} 
</style> 

html部分:
 

复制代码 代码示例:
<div id="divPanel"> 
<div id="divNext" onclick="NextPage()">下一个</div> 
<div id="divGoToBottom" onclick="GoToBottom()">到底部</div> 
</div> 

javascript脚本部分:
 

复制代码 代码示例:
<script type="text/javascript"> 
function NextPage() { 
var objNext = document.getElementById("<%=btnNext.ClientID %>"); 
if (objNext.disabled == true) { 
alert("已是最后一张。"); 
window.close(); 

else 
objNext.click(); 

function GoToBottom() { 
window.scrollTo(0, 99999); 
return false; 

</script>