This is the seventh day of my participation in the More text Challenge. For details, see more text Challenge

Target effect:

Anchor points and smooth scrolling

Give a link to an ID on the top

element 
<div id="top"></div>
<a href="#top">Jump to the top of the page</a>
Copy the code

The latest scrollbehavior property is used to achieve smooth CSS scrolling

html {
  scroll-behavior: smooth;
}
Copy the code

See the effect

ScrollTo, scrollBy, scrollIntoViwe

Firstly, add the scroll-behavior attribute to the root node to implement smooth CSS scrolling

html {
  scroll-behavior: smooth;
}
Copy the code

Next, add a click event to the button and use any scrollTo, scrollBy, or scrollIntoViwe method to scrollTo the top.

Window.scrollto () scrolls to a coordinate in the document.

The elem.scrollto () method causes the interface to scrollTo a specified coordinate position for a given element.

window.scrollTo(0.0)
document.documentElement.scrollTo(0.0)
Copy the code

Window.scrollby () scrolls the document in the Window at the specified offset.

The elem.scrollby () method makes the element scroll a certain distance.

window.scrollBy(0, -100000)
document.documentElement.scrollBy(0, -100000)
Copy the code

Window.scroll() scrolls the Window to a specific position in the document.

The Elem. Scroll () method is used to scroll to a specific coordinate in a given element.

window.scroll(0.0)
document.documentElement.scroll(0.0)
Copy the code

Elem. ScrollIntoViwe (top) will scroll the page to make Elem visible.

  • top=true(default), page scrolling, enabledElemAppears at the top of the window. The top edge of the element is aligned with the top of the window.
  • top=false, page scrolling, soElemAppears at the bottom of the window. The bottom edge of the element is aligned with the bottom of the window.
document.documentElement.scrollIntoView()
Copy the code

See the effect

Detect scroll position: Scroll event

  • usedocument.documentElementReturns the root element of the document, which we need to get the offset value
  • Add on the buttonclickEvent listener. inscrollToTopFunction inside, usingscrollToMethod to scroll to the top of the screen.
const scrollToTopBtn = document.querySelector('.scrollToTopBtn')
const rootElement = document.documentElement

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

scrollToTopBtn.addEventListener('click', scrollToTop)
Copy the code

Next up is the display button, which we can use to detect scrolling using the scroll event listener.

The handleScroll function is called each time the user scrolls. Now, we need the total number of pixels we can scroll through.

  • Element.scrollHeightRead-only property. Gives the content height of an element, including parts that are not visible due to overflow.
  • Element.clientHeightRead-only property. Gives the inner height of the element in pixels, that is, the height of the visible part, including the inner margin, but not the horizontal scroll bar, borders, and margins.
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)
Copy the code

See the effect

Intersection Observer API

The Intersection Observer API provides a way to asynchronously observe changes to target elements that intersect with ancestor elements or the viewport of a top-level document.

The Intersection Observer API is a great solution to this problem, compared to the previous scroll event monitor. This is a fairly new browser API that allows developers to delegate most tasks to the browser in a more optimized way.

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

// Classes will be added or removed once the footer enters or leaves the viewport. The callback takes the entries array as an argument.
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)
Copy the code

See the effect

RequestAnimationFrame sets the animation

Tell the browser window. RequestAnimationFrame (), you want to perform an animation, and required the browser until the next redraw calls the specified callback function to update the animation. This method needs to be passed a callback function as an argument, which will be executed before the browser next redraw

  • Element.scrollTopProperty gets or sets the number of pixels by which an element’s contents scroll vertically.
  • usewindow.requestAnimationFrame()To set the scrolling animation.
const scrollToTop = () = > {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)}}Copy the code

See the effect