标签：style blog http color os io java ar for
这两天想在网页中添加一个添加浮动按钮，点击该按钮滚动则到网页底部。在网上bing搜索了一下，大多是JQuery的。
我想要纯JavaScript的，只好DIY了。在IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常。
其中难点在于，setScrollBottom这个函数。
按常规写法：
function setScrollBottom(value) {
if (document.documentElement.scrollTop){
document.documentElement.scrollTop += value;
} else {
document.body.scrollTop += value;
}
}
在网页第一次载入完成时点击浮动按钮，在IE9、11，Maxthon 1.6.7，Firefox30、31中会无效，在360极速浏览器则有效。
在IE9、11，Maxthon 1.6.7，Firefox30、31中无效，是因为此时滚动条按钮在顶部，不论document.body.scrollTop还是document.documentElement.scrollTop值都是0，document.documentElement.scrollTop += value;不会被执行，而document.body.scrollTop += value这句虽然会被执行，但由于声明了文档类型，document.body.scrollTop恒为0。
在360极速浏览器中有效，则是因为即使声明了文档类型，chrome内核仍然不认document.documentElement.scrollTop，只用document.body.scrollTop。
如果改成：
function setScrollBottom(value) {
if (document.body.scrollTop){
document.body.scrollTop += value;
} else {
document.documentElement.scrollTop+= value;
}
}
效果就会反过来。
要想两全齐美，当然我们可以通过添加识别浏览器类型的代码来进行区分并做相应处理，不过我们可以利用document.body.scrollTop值是否恒为0这一点来做简单的区分，如下面的演示代码所示。
btw，在网上找到两个直接沉底的简单代码：
其1：
<a href="#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法1</a>
思路：document.all[document.all.length-1]获得最后一个元素。scrollIntoView()滚动到视线内。IE和FireFox都行。文档最末元素不在最底下时不适用。
其2：
<a href="#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法2</a>
思路：只要滚动到一个很远很远的地方就可以了。
也一并放入演示代码里了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<HEAD>
<TITLE>添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码（goBottom）by PurpleEndurer</TITLE>
<style type="text/css">
#goBottomBtn {float:right; POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 20px; WIDTH: 30px; BOTTOM: 65px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px; _position: absolute; _right: auto; border: 1px solid gray; background:green; color:white;}
</style>
</HEAD>
<BODY>
<p>添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码（goBottom） by PurpleEndurer <a href="http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer</a></p>
<p>IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常</p>
<p><a href="#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法1</a> <a href="#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法2</a></p>
<script type="text/javascript">
<!--
//添加99行文字
function writeLine()
{
for (var j=0; j < 100; j++)
{
document.writeln(‘<p>‘+ j +‘ 添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码<p>‘);
}
}
writeLine();
function goBottomEx()
{
function addGoBottomDiv()
{
var div = document.createElement(‘div‘);
div.innerHTML = ‘<br /><span style="font-size:30px;" title="直达底部">↓</span>‘;
div.setAttribute(‘id‘, ‘goBottomBtn‘);
document.body.appendChild(div);
}
var o = document.getElementById(‘goBottomBtn‘);
if (null==o)
{
addGoBottomDiv();
showBottomBtn();
}
o = document.getElementById("goBottomBtn");
function getScrollTop()
{
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollBottom(value) {
document.body.scrollTop += value;
if (0==document.body.scrollTop){
document.documentElement.scrollTop += value;
}
}
function isBottom() {
var a = document.documentElement.clientHeight || document.body.clientHeight;
var b = document.documentElement.scrollTop || document.body.scrollTop;
var c = document.documentElement.scrollHeight || document.body.scrollHeight;
return (a+b >= c);
}
function showBottomBtn(){
var o = document.getElementById(‘goBottomBtn‘);
o.style.display = isBottom() ? "none" : "";
}
window.onscroll = function() {
showBottomBtn();
}
o.onmousemove = function() {
this.style.background = "#33cc66";
}
o.onmouseout = function() {
this.style.background = "green";
}
o.onclick = function() {
var goBottom = setInterval(scrollMove, 10);
function scrollMove() {
setScrollBottom((getScrollTop() + 100) / 5); //网页刚载入完成时getScrollTop()返回值为0
if (isBottom()) {clearInterval(goBottom);}
}//scrollMove()
}//o.onclick
}//goBottomEx()
goBottomEx()
//-->
</script>
</BODY>
</HTML>
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常
标签：style blog http color os io java ar for
原文地址：http://blog.csdn.net/purpleendurer/article/details/39100755
