php锚点链接页内传值,锚点链接跳转到另一页面指定位置

前言

最近做官网更新发现使用的是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 张鑫旭-锚点定位机制，篇幅较长， 感兴趣的可以参考一下