添加浮动按钮点击滚动到网页底部的纯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下测试正常

则滚动到网页底部。在网上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" οnclick="window.scrollTo(0,99999);return false;">跳到网页底部方法1</a>

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

 其2:

<a href="#1" οnclick="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" οnclick="window.scrollTo(0,99999);return false;">跳到网页底部方法1</a>  <a href="#1" οnclick="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>
相关文章
|
Web App开发 搜索推荐 安全
火狐(Mozilla Firefox)浏览器安装教程,附火狐(Mozilla Firefox)安装包
火狐浏览器2025年8月最新版141.0.2发布,支持Windows、Mac、安卓系统,运行速度快,安全性高。提供离线安装包下载,支持多种网络标准,个性化定制功能丰富,安装简便,可自定义安装路径并恢复上次浏览标签,带来更流畅上网体验。
4519 6
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
485 1
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
1069 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
1556 9
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
989 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
1166 11
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
273 0
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
1568 15
在 golang 中执行 javascript 代码的方案详解
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~