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

前言

最近做官网更新发现使用的是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 goToAbout(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')
        goToAbout(aboutId)
    })
})

注意

关于锚点跳转，首要条件就是元素要有滚动，即：锚点元素在可滚动元素的内部

后续

说到这儿你可能会和我一样想知道锚点链接的原理，看我的函数命名getHash(),对，就是跟路由的hash值有关，这儿有一篇关于锚点的原理为css dalao 张鑫旭-锚点定位机制，篇幅较长， 感兴趣的可以参考一下

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