JavaScript：返回到顶部的方法有哪些?

来源博客：【Harryの心阁】

第十五天

---

(题目来源: 前端每日知识3+1)

Javascript题目

题目 : 返回到顶部的方法有哪些? 把其中一个方法出来 (js)

问题解答

• 有多种方法实现:
• 使用锚点链接.
• scrollTop方法(设置body标签和文裆元素的scrollTop值为0).
• scrollTo方法 使页面滚动到指定的区域, 返回顶部则设置为scrollTo(0, 0)
• 使用scrollBy方法 监听页面滚动的距离, 然后设置在y方向上的移动距离为负值
• scrollIntoView()方法, 与锚点的方法类似

解题思路

锚点

<li id="top" style="height: 4000px;">这是顶部哦</li>
<a href="#top">返回顶部</a>

scrollTop方法

  <li id="top" style="height: 4000px;">返回底部</li>
  <a href="javascript:;" id="btn">返回顶部</a>
  <script>
    document.querySelector('#btn').addEventListener('click', function() {
      document.body.scrollTop = document.documentElement.scrollTop = 0
    })
  </script>

scrollTo(x, y)方法

  <li id="top" style="height: 4000px;">返回底部</li>
  <a href="javascript:;" id="btn">返回顶部</a>
  <script>
    document.querySelector('#btn').addEventListener('click', function() {
      scrollTo(0, 0)
    })
  </script>

scrollBy(x, y)方法

  <li id="top" style="height: 4000px;">返回底部</li>
  <a href="javascript:;" id="btn">返回顶部</a>
  <script>
    document.querySelector('#btn').addEventListener('click', function() {
      let top = document.body.scrollTop || document.documentElement.scrollTop
      scrollBy(0, -top)
    })
  </script>

ele.scrollIntoView()方法

  <li id="top" style="height: 4000px;">返回底部</li>
  <a href="javascript:;" id="btn">返回顶部</a>
  <script>
    document.querySelector('#btn').addEventListener('click', function() {
      document.querySelector('#top').scrollIntoView()
    })
  </script>

知识回顾

• concat为深拷贝, 将两个数组或者多个数组进行合并
• splice是在原来数组的基础上进行截取, 会改变原来数组的值
• slice不会改变原数组, 会返回一个新的数组
• join 方法也是返回一个新的数组, 不会改变原数组

【改变原数组和不会改变原数组的方法】
【滚动参考】

公众号：今日在学