JavaScript Gets the scroll bar position and slides the page to the anchor point

  • 2021-10-27 06:21:55
  • OfStack

Preface

This article records a problem encountered in recent work, In the process of mixed development of app native and front-end h5, one of the pages is a page for selecting city list, which is similar to the functions of selecting cities when Meituan is hungry, selecting bank list in bank app, and quickly locating the anchor point of contact selection in address book. As a newcomer, I feel that this function still has one point of pressure. Let me share one of the implementation methods I found.

What is Anchor Point Problem

For pc web pages, the common back to the top button on the right side of the web page, click to jump directly to the top of the web page, which is the realization of anchor points;

For the mobile terminal, open the address book of your mobile phone, click the letter on the right side, and the page will jump directly to the contact person with the corresponding letter, which is also the realization of anchor point.

Common Solutions

1. < a > The href attribute in the tag is set to the value of the id of the jump element


<style>
    #mydiv{
      height: 1200px;
      width: 100%;
      background-color: pink;
      position: relative;
    }
    a{
      position: absolute;
      top: 1000px;
      left: 1000px;
    }
     </style>
  <div id="mydiv">
     I am the top of the page 
  </div>
  <a href="#mydiv" rel="external nofollow" > Back to the top </a>

The above method is equivalent to setting a hyperlink, a label jumps directly, but it is not very practical to change the address in the browser address bar

2. Native js gets the scroll bar position and makes changes to scrollTop


<style>
    body{
      position: relative;
    }
    h1{
      margin: 0 auto;
    }
    .mybtn1{
      position: fixed;
      left: 200px;
      top: 500px;
    }
    .mybtn2{
      position: fixed;
      left: 200px;
      top: 550px;
    }
  </style>
    <body>
       <h1 id="topH1">1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
       <h1>7</h1>
       <h1>1</h1>
      <h1>2</h1>
       <h1>3</h1>
       <h1>4</h1>
       <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
       <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
       <h1 id="tobtmH1">7</h1>
  <button class="mybtn1"  onclick="toTop()"> Back to the top </button>
  <script>
   function toTop(){
    var topH1 = document.getElementById("topH1")
    document.documentElement.scrollTop=topH1.offsetTop 
    window.pageYOffset=topH1.offsetTop 
    document.body.scrollTop=topH1.offsetTop ;
    
   }
  </script> 
    </body>

This method is to add a click event to the button and change the scroll bar position after triggering the click event. However, this method is troublesome to deal with compatibility problems, and the mobile terminal of pc is effective.

3. element. scrollIntoview causes the scroll bar to change according to the view


<style>
    body{
      position: relative;
    }
    .mydiv{
      margin-top: 100px;
      border: 1px solid pink;
    }
    h1{
      margin: 0 auto;
    }
    .mybtn1{
      position: fixed;
      left: 200px;
      top: 500px;
    }
    .mybtn2{
      position: fixed;
      left: 200px;
      top: 550px;
    }
</style>
<body>
  <div class="mydiv">
  <h1 id="topH1">1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1 id="tobtmH1">7</h1>
</div>
  <button class="mybtn1"  onclick="toTop()"> Back to the top </button>
  <button class="mybtn2" onclick="toBtm()"> Go to the bottom </button>
  <script>
    window.onload=function(){

    }
  //  Calling the method is element.scrollIntoview()
  // Parameter is true The page or container scrolls so that element Align the top of the view container with the top of the 
  // Parameter is false When, so that element Align the bottom of the view container with the bottom of the 
    function toTop(){
      var topH1 = document.getElementById('topH1')
      topH1.scrollIntoView(true)
    }
    function toBtm() {
      var tobtmH1 = document.getElementById('tobtmH1')
      tobtmH1.scrollIntoView(false)
    }
  </script> 
</body>

The above method is to jump the anchor point to the top or bottom of the view, without too many disadvantages, and the mobile end of pc is effective.

Advanced solution

The advanced method is to call the third plug-in better-scroll, this method has not been tested, and there are not too many pits to view the data, so you need to add it yourself.

The above is the JavaScript scroll bar position and slide the page to the anchor point details, more information about JavaScript scroll bar slide to the anchor point please pay attention to other related articles on this site!


Related articles: