start

Recently, the project is making a list to show the relevant requirements, which requires a shortcut button to scroll to the top and bottom. After referring to some articles in the community, I will write this article for your reference!

A lot of times the scrolling effect we use is like an anchor point, which just flashes by, and it’s a very unfriendly experience. So here are some ways to smooth scrolling.

There are some related knowledge points, do not understand can refer to this article: link address

The starting address

Use the scroll behavior of the CSS

scroll-behavior: auto | smooth | inherit | unset
Copy the code

Usually we just use auto and smooth, smooth means it’s smooth, it has a transition, auto doesn’t have a transition, it just flashes.

We usually go back to the top and just set this property to HTML. The following code

<div id="container" class="box"> <p>Hello, Backtotop</p> <br/> <p>Hello, Backtotop</p> <br/> <p>Hello, Backtotop</p> <br/> <p>Hello, Backtotop</p> <br/> /* omit some code */ </div> <a href="#container" class="backto-top-btn"> Back to top button </a>Copy the code

CSS style code:

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

Note: the a tag I used above checks the ID, which may not be good because the default behavior of the A tag adds a hash to the address, which can be problematic for vue routing using hash mode.

The easier way

  • Going back to the top, the default behavior of the A tag is problematic. We can do this in a simpler way, by first styling the HTML in your page:
html {
  scroll-behavior: smooth;
}
Copy the code

Bind an event to your back to the top button, such as the click event, and add the back to the top code we normally use

window.scrollTo(0, 0);
Copy the code

This way, as long as your device and browser support this CSS property, it will also have a smooth effect.

  • To go back to the bottom, we calculate the height of the DOM element, subtract the height of our window, and we have the bottom
window.scrollTo(0, document.documentElement.scrollHeight - window.innerHeight);
Copy the code

Equipment support at hand

  • IOS 13.3 Safari does not support smooth
  • IOS 11.4.1 Safari does not support smooth
  • Galaxy S9 Android 9.0 comes with browser support for Smooth
  • Chrome 79 supports Smooth

Using JS element.scrollintoView ()

element.scrollIntoView(); // Equivalent to element.scrollintoView (true) element.scrollIntoView(alignToTop); // Boolean element. ScrollIntoView (scrollIntoViewOptions); // Object parametersCopy the code

This is the browser’s own scroll function, is also a new function, may not be supported by many devices and browsers. Here is an explanation of the parameters of MDN

This feels much easier to use than CSS, just bind the function to the DOM element you want to scroll

// Scroll to the top of this.$refs.container.scrollIntoView(true); Vue syntax // Scroll to the bottom of this.$refs.container.scrollIntoView(false); // Vue syntaxCopy the code

Equipment support at hand

  • IOS 13.3 Safari does not support smooth
  • IOS 11.4.1 Safari does not support smooth
  • Galaxy S9 Android 9.0 comes with browser support for Smooth
  • Chrome 79 supports Smooth

Buffering schemes supported by multiple devices

// Encapsulate a function back to the bottom or top scrollToTop(position) {// Use requestAnimationFrame, if notsetTimeOut
  if(! window.requestAnimationFrame) { window.requestAnimationFrame =function(callback) {
      return setTimeout(callback, 20)}} // Get the current element scrolling distancelet scrollTopDistance = document.documentElement.scrollTop || document.body.scrollTop;

  function smoothScroll() {// If you roll to the top, position passes 0, distance must be negative.letdistance = position - scrollTopDistance; // Create a buffer effect scrollTopDistance = scrollTopDistance + distance / 5; // Determine the conditionif(Math.abs(distance) < 1) {
      window.scrollTo(0, position);
    }else {
      window.scrollTo(0, scrollTopDistance);
      requestAnimationFrame(smoothScroll);
    }
  }

  smoothScroll();
 }
Copy the code

Call this function

// return to top scrollToTop(0); / / get to the bottom scrollToTop (document. DocumentElement. ScrollHeight - window. InnerHeight);Copy the code

Here is a demonstration of the effect

Equipment support at hand

  • IOS 13.3 Safari support
  • IOS 11.4.1 Safari support
  • Galaxy S9 Android 9.0 comes with browser support
  • Chrome 79 support

The resources

The link address

Thanks for the big guy’s article above!