# 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 similar

##### Implementation process

It’s easy to use anchors

a.pug

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

b.pug

#about_1 Content1
#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 () {
})
})
##### 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
li
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/

## How to search files or directories under CentOS

Search for files or directories: The search for files is great! Because we often need to know where that file is, let’s talk about how to search it! There are also quite excellent ones under Linux Search system! Usually find is not very common! Because the speed is slow, but also very hard disk! Usually […]