[英]JavaScript Smooth Scroll Explained
I have seen the following code snippet on a number of pages. 我在很多页面上看到了以下代码片段。 I understand that it is used for smooth scrolling according to different id anchor tags.
据我所知,它用于根据不同的id锚标签进行平滑滚动。 However, I am still a little confused about what/how the regex replacement,
this
, and hash
variables work. 但是,我仍然对正则表达式替换,
this
和hash
变量的工作原理有何困惑。
What exactly is this frequent code snippet doing? 这个频繁的代码片段到底在做什么?
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
In the code, this
refers to the link clicked. 在代码中,
this
指的是单击的链接。 this.hash
refers to hash
of the link. this.hash
指的是链接的hash
。
Here's further breakdown of the code: 以下是代码的进一步细分:
$(function() {
// Binding an event handler to all anchors that contain
// a hash (#), but not necessarily JUST a hash - like href="#"
// which is typically used in JS...
$('a[href*=#]:not([href=#])').click(function() {
// Two conditional checks
// First:
// location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
// What we're doing is replacing the first forward slash (/) in the pathname
// for the current location and comparing it to the link that's been clicked.
// So http://personalsite.com/test/link/src, which normally would have
// a pathname of /test/link/src would be test/link/src
// The or check (||) is to see if the link matches the current domain
// location.hostname == this.hostname
// Basically, we want an internal anchor for the page we're on.
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
// Assigning the variable target, with the hash of the link that's been clicked
// which is conveniently enough, a jquery selector for IDs (i.e. #hash)
var target = $(this.hash);
// We check the target length - basically, does the element exist?
// If length equals to 0, we query the DOM by name attribute. Otherwise, we just re-assign target to self.
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// The rest is self explanatory... (animation using the target's offset)
// The return false prevents default behavior
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Hopefully this helps! 希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.