添加浮动按钮点击滚动到网页底部的纯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>
目录
打赏
0
0
0
0
57
分享
相关文章
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
2015年,JavaScript之父Brendan Eich再次创业,推出Brave浏览器和加密货币Basic Attention Token(BAT),旨在颠覆传统广告行业。Brave屏蔽广告、保护隐私,加载速度快;BAT则通过奖励机制让用户、内容创作者和广告主三方受益。尽管面临用户习惯和巨头竞争的挑战,Brave已拥有超4000万月活跃用户,成为全球增长最快的隐私浏览器,引领Web3生态发展。
116 22
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
125 63
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
205 58
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
Browser Use 是一款专为大语言模型设计的智能浏览器工具,支持多标签页管理、视觉识别、内容提取等功能,并能记录和重复执行特定动作,适用于多种应用场景。
676 0
Browser Use:开源 AI 浏览器助手,自动完成网页交互任务,支持多标签页管理、视觉识别和内容提取等功能
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
3月前
|
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
71 1
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
529 9
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
624 1
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
948 1
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
43 2

热门文章

最新文章