添加浮动按钮点击滚动到网页底部的纯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>
相关文章
|
8月前
|
测试技术 开发者 Python
Python单元测试入门:3个核心断言方法,帮你快速定位代码bug
本文介绍Python单元测试基础,详解`unittest`框架中的三大核心断言方法:`assertEqual`验证值相等,`assertTrue`和`assertFalse`判断条件真假。通过实例演示其用法,帮助开发者自动化检测代码逻辑,提升测试效率与可靠性。
578 1
|
9月前
|
算法 IDE Java
Java 项目实战之实际代码实现与测试调试全过程详解
本文详细讲解了Java项目的实战开发流程,涵盖项目创建、代码实现(如计算器与汉诺塔问题)、单元测试(使用JUnit)及调试技巧(如断点调试与异常排查),帮助开发者掌握从编码到测试调试的完整技能,提升Java开发实战能力。
856 0
|
7月前
|
安全 Java 测试技术
《深入理解Spring》单元测试——高质量代码的守护神
Spring测试框架提供全面的单元与集成测试支持,通过`@SpringBootTest`、`@WebMvcTest`等注解实现分层测试,结合Mockito、Testcontainers和Jacoco,保障代码质量,提升开发效率与系统稳定性。
|
8月前
|
人工智能 边缘计算 搜索推荐
AI产品测试学习路径全解析:从业务场景到代码实践
本文深入解析AI测试的核心技能与学习路径,涵盖业务理解、模型指标计算与性能测试三大阶段,助力掌握分类、推荐系统、计算机视觉等多场景测试方法,提升AI产品质量保障能力。
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
6735 74
|
11月前
|
测试技术 Go 开发者
如何为 gRPC Server 编写本地测试代码
本文介绍了如何使用 Go 语言中的 gRPC 测试工具 **bufconn**,通过内存连接实现 gRPC Server 的本地测试,避免端口冲突和外部依赖。结合示例代码,讲解了初始化内存监听、自定义拨号器及编写测试用例的完整流程,并借助断言库提升测试可读性与准确性。适用于单元及集成测试,助力高效开发。
247 1
|
10月前
|
安全 Java 测试技术
Java 项目实战中现代技术栈下代码实现与测试调试的完整流程
本文介绍基于Java 17和Spring技术栈的现代化项目开发实践。项目采用Gradle构建工具,实现模块化DDD分层架构,结合Spring WebFlux开发响应式API,并应用Record、Sealed Class等新特性。测试策略涵盖JUnit单元测试和Testcontainers集成测试,通过JFR和OpenTelemetry实现性能监控。部署阶段采用Docker容器化和Kubernetes编排,同时展示异步处理和反应式编程的性能优化。整套方案体现了现代Java开发的最佳实践,包括代码实现、测试调试
345 0
|
人工智能 自然语言处理 测试技术
自然语言生成代码一键搞定!Codex CLI:OpenAI开源终端AI编程助手,代码重构+测试全自动
Codex CLI是OpenAI推出的轻量级AI编程智能体,基于自然语言指令帮助开发者高效生成代码、执行文件操作和进行版本控制,支持代码生成、重构、测试及数据库迁移等功能。
3335 1
自然语言生成代码一键搞定!Codex CLI:OpenAI开源终端AI编程助手,代码重构+测试全自动
|
存储 jenkins 测试技术
Apipost自动化测试:零代码!3步搞定!
传统手动测试耗时低效且易遗漏,全球Top 10科技公司中90%已转向自动化测试。Apipost无需代码,三步实现全流程自动化测试,支持小白快速上手。功能涵盖接口测试、性能压测与数据驱动,并提供动态数据提取、CICD集成等优势,助力高效测试全场景覆盖。通过拖拽编排、一键CLI生成,无缝对接Jenkins、GitHub Actions,提升测试效率与准确性。
1157 11