锚点链接跳转到另一页面指定位置

前言

最近做官网更新发现使用的是pug+jquery
有个需求是点击顶部导航， 跳转到另一页面的指定位置，如下图
就是当我点击content1， 就跳转到页面中content1的位置，其他的类似

实现过程

使用锚点来做是相当easy了

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

// 锚点链接跳转到指定位置
var $root = $('html, body') // 为了增强性能，将 $('html, body') 选择器缓存起来。这样每次点击时就不需要再重新查找了
function toWhere(id) {
   if (!id) return
   if (id === 0) {
      $root.animate({ scrollTop: 0 }, 500)
    } else {
      $root.animate({ scrollTop: $('#about_' + id).offset().top}, 500)
    }
 }
 
 // 获取url中的hash值（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 () {
     $(function () {
        var aboutId = getHash('about')
        toWhere(aboutId)
    })
})

注意

* 关于锚点跳转，首要条件就是元素要有滚动，即：锚点元素在可滚动元素的内部,但是到目前为止还有问题:

* 就是每次点击锚点都会刷新页面, 导致每次页面跳转锚点都会从头滚动指定位置, 那么使用hash路由便可以解决这个问题,
* 原因: hash出现url中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面

修改后：

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)
  });

后续

关于锚点链接的原理，这儿有一篇关于锚点的原理为css dalao 张鑫旭-锚点定位机制，篇幅较长， 感兴趣的可以参考一下

【参考文章】https://blog.csdn.net/qq_41314371/article/details/79447818
https://www.zhangxinxu.com/wordpress/2013/08/url-anchor-html-锚点定位机制-应用-问题/