Anchor link to another page

Time:2019-12-2
Preface

Pug + jQuery is the latest official website update
One requirement is to click the top navigation to jump to the designated location of another page, as shown in the following figure
When I click content1, I will jump to the position of content1 in the page. Others are similarAnchor link to another page

Implementation process

It’s easy to use anchors

a.pug

ul.clearfix
  li
    a(href="/page?about=1") Content1
  li
    a(href="/page?about=2") content2
  li
    a(href="/page?about=3") content3

b.pug

#about_1 Content1
#about_2 content2
#about_3 content3

a.js

//Anchor link jumps to specified location
Var $root = $('html, body ') // to enhance performance, cache the $('html, body') selector. So you don't need to search again every time you click
function toWhere(id) {
   if (!id) return
   if (id === 0) {
      $root.animate({ scrollTop: 0 }, 500)
    } else {
      $root.animate({ scrollTop: $('#about_' + id).offset().top}, 500)
    }
 }
 
 //Get the hash value in the URL (the number after about)
 function getHash(hashName) {
    var reg = new RegExp('(^|&)' + hashName + '=([^&]*)(&|$)', 'i')
    var r = window.location.search.substr(1).match(reg)
    if (r != null) {
       return unescape(r[2])
     }
     return ''
   }
    
//Function execution
(function () {
     $(function () {
        var aboutId = getHash('about')
        toWhere(aboutId)
    })
})
Be careful
*As for anchor jump, the first condition is that the element must have rolling, that is, the anchor element is inside the scrollable element, but so far there are still problems:

*It means that every time you click the anchor, the page will refresh, resulting in that every time the page jumps to the anchor, it will scroll from the beginning to the specified location, so using hash routing can solve this problem,
*Reason: the hash appears in the URL, but it will not be included in the HTTP request, which has no impact on the backend at all, so changing the hash will not reload the page

After modification

a.pug

ul.clearfix
  li
    a(href="/page#about=1") Content1
  li
    a(href="/page#about=2") content2
  li
    a(href="/page#about=3") content3

b.js

  var $root = $('html, body');
  function toWhere(id){
    if (!id || id === 0) {
      $root.animate({ scrollTop: 0 }, 500)
    }
    const scrollHeight = $('#about_' + id).offset().top
    $root.animate({ scrollTop: scrollHeight - 60 }, 600)
  }

  $(function () {
    toWhere(window.location.hash.slice(1))
  })

  $(window).bind('hashchange', function () {
    var hashId = window.location.hash.slice(1);
    goToAnchor(hashId)
  });
Follow-up

About the principle of anchor link, here is an article about the principle of anchor point, which is CSS Dalao Zhang Xinxu – anchor location mechanism. It’s a long article. You can refer to it if you are interested in it

[reference article] https://blog.csdn.net/qq_/article/details/79447818
Https://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-anchor location mechanism-application-problem/