正文
js点击页面滑动到最底部，js鼠标滑动页面切换
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么在javascript的函数里面实现跳转到页面底部
一、使用锚标记返回页面顶部
使用HTML锚标记最简单，就是看起来有点不好看，点击后会在地址栏显示这个锚标记，其它的倒没什么。
页面顶部放置：
a name="top" id="top"/a
放置位置在body标签之后随便找个地方放都可以，只要靠近顶部即可。
页面底部放置：
a href="#top" target="_self"返回顶部/a
二、使用Javascript Scroll函数返回顶部
scrooll函数用来控制滚动条的位置，有两种很简单的实现方式：
方式1：
[javascript] view plaincopy
a href="javascript:scroll(0,0)" mce_href="javascript:scroll(0,0)"返回顶部/a
scroll第一个参数是水平位置，第二个参数是垂直位置，比如要想定位在垂直50像素处，改成scroll(0,50)就可以了。
方式2：
本方式是渐进式返回顶部，要好看一些，代码如下：
[javascript] view plaincopy
function pageScroll() {
window.scrollBy(0,-10);
scrolldelay = setTimeout('pageScroll()',100);
}
a href="pageScroll();" mce_href="pageScroll();"返回顶部/a
这样就会动态返回顶部，不过虽然返回到顶部但是代码仍在运行，还需要在pageScroll函数加一句给停止掉。
[javascript] view plaincopy
if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay);
三、使用Onload加上scroll功能实现动态返回顶部
1、首先在网页BODY标签结束之前加上：
div id="gotop"返回顶部/div
2、再调用以下JS脚本部分（本脚本非天缘原创，早前来源于Z-BLOG官方论坛上收集，源包未带作者链接，如果原作者看到敬请留言添加）：
[c-sharp] view plaincopy
BackTop=function(btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil(d.scrollTop*0.1);
if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=d.scrollTop?'block':"none"}
};
BackTop('gotop');
对Z-BLOG而言，可以放到$(document).ready(function(){....函数中，也可以独立存成一个js文件，比如gotop.js，再通过：
SCRIPT src="/js/gotop.js" type=text/javascript/SCRIPT
来调用，当然了位置最好放在“返回顶部”标签的下面，该调用方法已假设路径为JS，其它位置请自行修改。
相关问答
Q1: js中当一个页面滚动到最底部的时候想返回到前一页,如何保持原来页面的状态不变?
您好！具体代码如下，兼容各浏览器，其中scrollTop 为当前页面到顶部的距离，document.body.offsetHeight为整个页面的高度，document.documentElement.clientHeight为当前屏幕的高度，有不明白的可以问我，希望我的回答能帮到您！
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title /title
style
body{margin:0;height:2000px;}
div{height:500px;width:500px;background:#f00;margin:0 auto;}
/style
script
window.onscroll=function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
if(scrollTop=document.body.offsetHeight-document.documentElement.clientHeight)
{
document.getElementById("div1").style.display="none";
alert("去看看是不是DIV不见了");
}
}
/script
/head
body
div id="div1"
this is a div
/div
/body
/html
Q2: js scroll 怎么滚到最下方
js判断window.scroll 判断滚动到底部的方法是设置一个变量，来检测鼠标位置。
具体的实现方法如下：
$(window).scroll(function() {
如果滚动的高度加上窗口的高度等于页面的高度就是到了底部
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!"); //已经滚动到底部
}
});
或者也可以写专用方法检测高度：
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
然后再用以下方法检测：
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == getDocHeight()) {
alert("bottom!");
}
});
Q3: javascript 怎么让页面下拉到最底下？
不用JS，用HTM的锚记就可以了。给这个锚记定位#，然后上面加一个连接到#就行了。
js点击页面滑动到最底部的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js鼠标滑动页面切换、js点击页面滑动到最底部的信息别忘了在本站进行查找喔。
