如何检查锚点 URL 是否会转到同一站点(并且平滑滚动,否则离开页面)?
How to check if anchor URL will go to the same site (and smooth scroll, leave page otherwise)?
我正在尝试创建一个防弹脚本,它可以动画滚动到带有 jQuery 的锚点,但前提是锚点的 href 位置指向我当前站点中的现有锚点。
这是脚本:
var assConfig;
assConfig = {
duration: 500,
easing: 'swing',
complete: null
};
//Smooth scrolling with links
$('a[href*=\#]:not([href$=\#])').on('click', function(event) {
var hash;
// if the anchor is on another site or subsite simply proceed with the default action
// which will probably be leaving the site and go to ghe href location
if (!o(event.target).attr("href")).startsWith("#") && (##### CONDITION-PART ######)) {
return;
}
event.preventDefault();
hash = '#' + $(event.target).attr("href").split("#")[1];
if (typeof $(hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
}
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function() {
if (typeof $(location.hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(location.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
}
});
我的问题是要放什么而不是 ##### CONDITION-PART ######
。如果锚点以主题标签开头,则它只能位于同一页面上。有如下锚链接:
href="/?controller=info&action=site/foo#my-beautiful-anchor-target"
href="/#my-beautiful-anchor-target"
href="http://www.example.com/?foo#my-beautiful-anchor-target"
有时它们可能表示相同的站点,尽管它们有所不同,例如:
href="http://www.example.com/?foo#my-beautiful-anchor-target"
href="/?foo#my-beautiful-anchor-target"
href="?foo#my-beatiful-anchor-target"
那么检测 $(event.target).href
和 window.location.href
之间是否是页面重新加载的最佳方法是什么?
这就是我最终得到的结果:
event.target.pathname !== window.location.pathname
|| event.target.hostname !== window.location.hostname
|| event.target.protocol !== window.location.protocol
|| event.target.search !== window.location.search
最终完整解决方案:
var assConfig = {
duration: 500,
easing: 'swing',
complete: null
};
//Smooth scrolling with links
$('a[href*=\#]:not([href$=\#])').on('click', function (event) {
var hash;
if (event.target.pathname !== window.location.pathname || event.target.hostname !== window.location.hostname || event.target.protocol !== window.location.protocol || event.target.search !== window.location.search) {
return;
}
event.preventDefault();
hash = '#' + $(event.target).attr("href").split("#")[1];
if (typeof $(hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
} else {
console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
}
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function () {
if (typeof $(location.hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(location.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
} else {
console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
}
});
我正在尝试创建一个防弹脚本,它可以动画滚动到带有 jQuery 的锚点,但前提是锚点的 href 位置指向我当前站点中的现有锚点。
这是脚本:
var assConfig;
assConfig = {
duration: 500,
easing: 'swing',
complete: null
};
//Smooth scrolling with links
$('a[href*=\#]:not([href$=\#])').on('click', function(event) {
var hash;
// if the anchor is on another site or subsite simply proceed with the default action
// which will probably be leaving the site and go to ghe href location
if (!o(event.target).attr("href")).startsWith("#") && (##### CONDITION-PART ######)) {
return;
}
event.preventDefault();
hash = '#' + $(event.target).attr("href").split("#")[1];
if (typeof $(hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
}
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function() {
if (typeof $(location.hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(location.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
}
});
我的问题是要放什么而不是 ##### CONDITION-PART ######
。如果锚点以主题标签开头,则它只能位于同一页面上。有如下锚链接:
href="/?controller=info&action=site/foo#my-beautiful-anchor-target"
href="/#my-beautiful-anchor-target"
href="http://www.example.com/?foo#my-beautiful-anchor-target"
有时它们可能表示相同的站点,尽管它们有所不同,例如:
href="http://www.example.com/?foo#my-beautiful-anchor-target"
href="/?foo#my-beautiful-anchor-target"
href="?foo#my-beatiful-anchor-target"
那么检测 $(event.target).href
和 window.location.href
之间是否是页面重新加载的最佳方法是什么?
这就是我最终得到的结果:
event.target.pathname !== window.location.pathname
|| event.target.hostname !== window.location.hostname
|| event.target.protocol !== window.location.protocol
|| event.target.search !== window.location.search
最终完整解决方案:
var assConfig = {
duration: 500,
easing: 'swing',
complete: null
};
//Smooth scrolling with links
$('a[href*=\#]:not([href$=\#])').on('click', function (event) {
var hash;
if (event.target.pathname !== window.location.pathname || event.target.hostname !== window.location.hostname || event.target.protocol !== window.location.protocol || event.target.search !== window.location.search) {
return;
}
event.preventDefault();
hash = '#' + $(event.target).attr("href").split("#")[1];
if (typeof $(hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
} else {
console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
}
});
// Smooth scrolling when the document is loaded and ready
$(document).ready(function () {
if (typeof $(location.hash).offset() !== 'undefined') {
$('html,body').animate({
scrollTop: $(location.hash).offset().top
}, assConfig.duration, assConfig.easing, assConfig.complete);
} else {
console.log("Note: Scrolling to the anchor ist not possible as the anchor does not exist.");
}
});