这几种方法帮你快速实现回到页面顶部

初见雨夜 2023-03-28 原文

背景介绍

当页面内容很多的时候，用户可能会一直往下滑动页面。但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。

如今在我们浏览网站的时候，常常能遇见“回到顶部”这个按钮。目前主流的回到页面顶部分表现为两种，一种是直接回到页面的顶部，这种方式简单粗暴；另外一种则是自动滚动间接回到页面顶部，这样一来视觉体验上可能更好，但是用户需要过几秒才能看到顶部内容。

例如掘金，在滚动到一定高度时会出现“回到顶部”按钮，点击后会直接回到页面顶部，就是上文说到的第一种情况。

实现

动态显示滚动按钮

“回到顶部”并不是一直显示的，而是滚动到一定值才出现的，因此应该在window.onscroll里定义一个判断事件。

window.onscroll = function () {
  var currentHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  // 页面滚动超过300px就显示
  if (currentHeight > 300) {
    document.getElementById('backtop').style.display = 'block'
  } else {
    document.getElementById('backtop').style.display = 'none'
  }
}

直接回到顶部

锚点

最简单的方法。给顶部的div一个id，点击直接回到这个div元素，但是URL上会出现#top。

<div id="top"></div>
......
<a href="#top">回到顶部</a>

scrollTo函数

控制滚动条回到指定位置，第一个参数是距离页面左端的距离，第二个参数是距离页面顶部的距离。

<a href="javascript:scrollTo(0, 0)">回到顶部</a>

scrollTop函数

控制滚动条垂直偏移。

<a onclick="byScrollTop()">回到顶部</a>
......
function byScrollTop() {
  document.documentElement.scrollTop = 0;
  window.pageYOffset = 0; // 兼容ios
  document.body.scrollTop = 0; // 兼容低版本ie
}

scrollBy函数

该方法可把内容滚动指定的像素数。第一个参数指向右滚动的像素，第二个参数指向下滚动的参数，负数可使方向相反。

<a onclick="byScrollBy()">回到顶部</a>
......
function byScrollBy() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  scrollBy(0, -topHeight);
}

间接回到顶部

定时器实现滚动动画

通过定时器实现固定速度的自动滚动动画效果。但是这样会有个问题，就是当页面内容十分多的时候，这个时候离顶部已经有很长一段距离了。如果还是一个固定速度的话，可能会长达10秒钟，这对用户体验来说是不友好的。

<a onclick="scrollToTop()">回到顶部</a>
......
function scrollToTop() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  scrollBy(0, -100);
  // 模拟鼠标向上滚动事件
  scrolldelay = setTimeout('scrollToTop()', 50);
  // 清除滚动事件，避免无法向下移动
  if (topHeight === 0) {
    clearTimeout(scrolldelay);
    scrolldelay = null;
  }
}

定时器实现滚动动画-改良版

基于上面这个问题，我们可以设置一个速度的最小值，让滚动速度从快到慢，但也不至于过慢。

function scrollToTop() {
  var topHeight =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop;
  var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
  scrollBy(0, -speed);
  // 模拟鼠标向上滚动事件
  scrolldelay = setTimeout('scrollToTop()', 50);
  // 清除滚动事件，避免无法向下移动
  if (topHeight === 0) {
    clearTimeout(scrolldelay);
    scrolldelay = null;
  }
}

最终效果

完整代码

<style>
    a {
        display: block;
    }

    #top {
        height: 2000px;
        background-color: #999
    }

    #backtop {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        background-color: #fff;
        z-index: 9;
    }
</style>

<body>
    <div id="top">
        这里是页面顶部
    </div>
    <div id="backtop">
        <a href="#top">回到顶部-锚点</a>
        <a href="javascript:scrollTo(0, 0)">回到顶部-scrollTo函数</a>
        <a onclick="byScrollTop()">回到顶部-scrollTop函数</a>
        <a onclick="byScrollBy()">回到顶部-scrollBy函数</a>
        <a onclick="scrollToTop()">回到顶部-定时器动画版</a>
    </div>
    <script>
        window.onscroll = function () {
            var currentHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            console.log(currentHeight, "currentHeight");
            if (currentHeight > 300) {
                document.getElementById('backtop').style.display = 'block'
            } else {
                document.getElementById('backtop').style.display = 'none'
            }
        }

        function byScrollTop() {
            document.documentElement.scrollTop = 0;
            window.pageYOffset = 0; // 兼容ios
            document.body.scrollTop = 0; // 兼容低版本ie
        }

        function byScrollBy() {
            var topHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            scrollBy(0, -topHeight);
        }

        function scrollToTop() {
            var topHeight =
                document.documentElement.scrollTop ||
                window.pageYOffset ||
                document.body.scrollTop;
            var speed = topHeight / 10 > 100 ? topHeight / 10 : 100;
            scrollBy(0, -speed);
            // 模拟鼠标向上滚动事件
            scrolldelay = setTimeout('scrollToTop()', 50);
            // 清除滚动事件，避免无法向下移动
            if (topHeight === 0) {
                clearTimeout(scrolldelay);
                scrolldelay = null;
            }
        }
    </script>
</body>

这几种这几 document scrollTop topHeight JavaScript

有关这几种方法帮你快速实现回到页面顶部的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2
我正在尝试设置一个puppet节点，但rubygems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由rubygems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby
Ruby 方法() 方法 - 2
我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco
ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2
我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。最佳答案或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby1.9+ 关于ruby-主要:Objectwhenrun
ruby - 多个属性的 update_column 方法 - 2
我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案您可以使用update_columns(attr1:val1,attr2:val2
ruby - 检查方法参数的类型 - 2
我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？最佳答案使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)