You should remember the people who hold umbrellas for you in the heavy rain, the people who help you block foreign things, the people who hold you close in the dark, the people who make you laugh, the people who chat with you all night, the people who come to see you in the car, the people who cry with you, the people who accompany you in the hospital, and the people who always value you. These are the people who make up the little warmth in your life, the warmth that keeps you out of the dark, the warmth that makes you a good person. -- Haruki MurakamiCopy the code

instructions

Recently, I wanted to add a page scroll back to the top button in the project. Originally, I wanted to use the element-UI Backtop to return to the top component. The instructions are as follows:

<el-backtop target="target-container"></el-backtop>
Copy the code

Where target binds to the container object that needs to be added back to the top button, typically the entire body container.

It is important to note that the scrolling object must have a fixed height, and the overflow property of the object must be set to Auto /scroll, otherwise the default overflow: Visible will not work for this component.

If the overflow property of the object is set to auto/scroll, the scroll listening event added in other files in the project will not take effect.

 // Add scroll event for window, using native method
 window.addEventListener("scroll".this.setNavPosition);
 
 setNavPosition() {
  var nav = document.getElementById("item-nav");
  
  // Different browsers get scrollTop differently
  var scroll_height =
    document.body.scrollTop || document.documentElement.scrollTop;
  if (scroll_height > 65) {
    nav.style.top = "20px";
  } else {
    nav.style.top = 80 - scroll_height + "px"; }}Copy the code

How to get the scrollTop

Because document. The body. The scrollTop and document. DocumentElement. ScrollTop both have a characteristic, is only at the same time there will be a value to take effect. Such as document. Body. ScrollTop can take to the value of the document. The documentElement. The scrollTop will always be 0, and vice versa. So, if you want to get the actual scrollTop value for the page, you can do this:

var sTop=document.body.scrollTop || document.documentElement.scrollTop;
Copy the code

Either of these values is always zero, so you don’t have to worry about affecting the real scrollTop.

Reference links:

1. Explanation and solution for why scrollTop is always 0 after setting
2. Page scroll bar thing or two

Hands-on with scrollTop value fetching

Overflow: visible

If overflow is visible, the Window’s scroll event can be heard, and document.body.scrollTop cannot be accessed by Chrome. And the document. The documentElement. ScrollTop available scrollTop values.

• The overflow property of the body is not set
  

  

• Can listen to the scroll event, and the document body. The scrollTop get less than the value, but the document. The documentElement. The scrollTop available values
  

  

Overflow: auto/scroll

If overflow of a container object is auto or scroll, the window’s scroll event cannot be heard, and for Chrome, document.body.scrollTop can fetch the scrollTop value. And the document. The documentElement. ScrollTop for less than.

It is not clear why overflow affects scroll event listening and scrollTop fetching, which will be added later.

Implementation method

After overflow:auto is added, the Backtop component will take effect, but the scroll event cannot be monitored. Therefore, the Backtop component is not used, and the code implemented by ourselves is as follows:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
    <div v-bind:class="showTopClass" id="top-bar" @click="toTop()"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true,
      showTopBar: false
    };
  },
  computed: {
    showTopClass: function() {
      return{ hide: ! ShowTopBar, show: this.showtopbar}}}, methods: {// use the same component, different parameters, but want to reload the casereload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    },
    toTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
    },
    scrollMonitor() {
      let sTop = document.body.scrollTop||document.documentElement.scrollTop;
      if(sTop > 600){
        this.showTopBar = true;
      }else {
        this.showTopBar = false; }}},mounted() {
    window.addEventListener("scroll", this.scrollMonitor);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollMonitor); }}; </script> <style>#top-bar {
  position: fixed;
  bottom: 30px;
  left: calc(50% + 640px);
  background-image: url("./assets/images/toTop.png");
  width: 46px;
  height: 46px;
  cursor: pointer;
  z-index: 5;
}

#top-bar:hover {
  background-image: url("./assets/images/toTop2.png");
}

#item_body + #top-bar {
  left: calc(50% + 540px);
}
</style>

Copy the code

Add scroll listening event in app. vue file within mounted period. If the scroll height exceeds 600px, the back to top button will be displayed.

Encapsulate as Vue instructions

Writing the back to top function directly in app.vue is troublesome, so it is extracted as a directive, and there is no need to listen for events during its life cycle. The steps are as follows:

• Encapsulation method

Vue.directive('to-top', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // console.log(el);
    el.addEventListener("click", () = > {document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      window.pageYOffset = 0;
    });
    window.addEventListener("scroll", () = > {let sTop = document.body.scrollTop||document.documentElement.scrollTop;
      if(sTop > 600){
        $("#top-bar").show();
      }else{$("#top-bar").hide(); }}); }});Copy the code

• Method of use

<div class="hide" id="top-bar" v-to-top></div>
Copy the code