首页 > 代码库 > 添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常

2024-07-21 10:17:09   214人阅读

　　这两天想在网页中添加一个添加浮动按钮，点击该按钮滚动则到网页底部。在网上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=http://www.mamicode.com/"#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法1


　　思路：document.all[document.all.length-1]获得最后一个元素。scrollIntoView()滚动到视线内。IE和FireFox都行。文档最末元素不在最底下时不适用。

　　其2：

<a href=http://www.mamicode.com/"#1" onclick="window.scrollTo(0,99999);return false;">跳到网页底部方法2


　　思路：只要滚动到一个很远很远的地方就可以了。

 

　　也一并放入演示代码里了。

 

<!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://www.mamicode.com/"http://blog.csdn.net/purpleendurer">http://blog.csdn.net/purpleendurer
>


 
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常


联系
我们