Anchor link to another page


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(href="/page?about=1") Content1
    a(href="/page?about=2") content2
    a(href="/page?about=3") content3


#about_1 Content1
#about_2 content2
#about_3 content3


//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 =
    if (r != null) {
       return unescape(r[2])
     return ''
//Function execution
(function () {
     $(function () {
        var aboutId = getHash('about')
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(href="/page#about=1") Content1
    a(href="/page#about=2") content2
    a(href="/page#about=3") content3


  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 () {

  $(window).bind('hashchange', function () {
    var hashId = window.location.hash.slice(1);

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:// location mechanism-application-problem/

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]