关于javascript:返回顶部

36次阅读

共计 2077 个字符，预计需要花费 6 分钟才能阅读完成。

在 <html> 元素上提供以 ID 为指标的链接

<div id="top"></div>
<a href="#top"> 跳转到页面顶部 </a>

咱们能够应用最新的 scroll-behavior 属性来实现 CSS 平滑滚动

html {scroll-behavior: smooth;}

查看成果

应用 document.documentElement 返回文档的根元素，咱们须要它来获取偏移值
在按钮上增加 click 事件监听器。在 scrollToTop 函数外部，应用 scrollTo 办法将其滚动到屏幕顶部。

const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
const rootElement = document.documentElement

const scrollToTop = () => {
  rootElement.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

scrollToTopBtn.addEventListener('click', scrollToTop)

接下来就是显示按钮了，咱们能够应用滚动事件侦听器检测滚动。

handleScroll 函数在每次用户滚动时都会被调用。当初，咱们须要能够滚动的像素总数。

Element.scrollHeight 只读属性。给出元素的内容高度，包含因为溢出而不可见的局部。
Element.clientHeight 只读属性。给出元素的外部高度（以像素为单位），即可见局部的高度，蕴含内边距，但不包含程度滚动条、边框和外边距。

function handleScroll() {
  const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  if ((rootElement.scrollTop / scrollTotal) > 0.80) {scrollToTopBtn.classList.add('showBtn')
  } else {scrollToTopBtn.classList.remove('showBtn')
  }
}

document.addEventListener('scroll', handleScroll)

查看成果

Intersection Observer API 提供了一种异步察看指标元素与先人元素或顶级文档的视口相交的更改的办法。

比起上一中 scroll 事件监听滚动，Intersection Observer API 在解决这类问题上是绝佳解决方案。这是一个相当新的浏览器 API，使开发人员能够以更优化的形式将大多数工作交给浏览器。

const target = document.querySelector('footer')
const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
const rootElement = document.documentElement

// 一旦页脚进入或来到视口，将增加或删除类。回调接管 entries 数组作为参数。function callback(entries, observer) {
  entries.forEach(entry => {if (entry.isIntersecting) {scrollToTopBtn.classList.add('showBtn')
    } else {scrollToTopBtn.classList.remove('showBtn')
    }
  })
}

const observer = new IntersectionObserver(callback)
observer.observe(target)

function scrollToTop() {
  rootElement.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

scrollToTopBtn.addEventListener('click', scrollToTop)

查看成果

window.requestAnimationFrame() 通知浏览器，你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

Element.scrollTop 属性能够获取或设置一个元素的内容垂直滚动的像素数。
应用 window.requestAnimationFrame() 来设置滚动动画。

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

查看成果

正文完