默认情况下,如果我的网站中有锚点,则单击链接时(即www.mysite.com/#anchor),地址栏上的URL会更改。
当我滚动到锚点时,是否可以立即更改地址栏中的URL?或者当我点击新锚点时,地址栏上的URL会更改,而我有一个包含多个锚点的长文档?
默认情况下,如果我的网站中有锚点,则单击链接时(即www.mysite.com/#anchor),地址栏上的URL会更改。
当我滚动到锚点时,是否可以立即更改地址栏中的URL?或者当我点击新锚点时,地址栏上的URL会更改,而我有一个包含多个锚点的长文档?
window.location.hash
来更新浏览器的哈希值。$(function () {
var currentHash = "#initial_hash"
$(document).scroll(function () {
$('.anchor_tags').each(function () {
var top = window.pageYOffset;
var distance = top - $(this).offset().top;
var hash = $(this).attr('href');
// 30 is an arbitrary padding choice,
// if you want a precise check then use distance===0
if (distance < 30 && distance > -30 && currentHash != hash) {
window.location.hash = (hash);
currentHash = hash;
}
});
});
});
window.history.pushstate
// Checks if the passed element is visible on the screen after scrolling
// source: https://dev59.com/FHRB5IYBdhLWcg3w3K4J
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$('#document').scroll(function(e) {
var anchors = $('.anchor');
for (var i = 0; i < anchors.length; ++i) {
if (isScrolledIntoView(anchors[i])){
var href = $(anchors[i]).attr('href');
location.hash = href.slice(href.indexOf('#') + 1);
break;
}
}
});
纯JS版本
在研究如何根据HTML部分元素在屏幕上的位置更新URL时,我一直找到这个主题,所以我希望这是一个好地方发布这个。
此函数循环遍历HTML部分元素。
function updateFragId() {
var len = sections.length;
for (var i = 0; i < len; i++) {
var id = sections[i].id;
收集相对于视口的垂直滚动位置。
var rect = sections[i].getBoundingClientRect().y;
将这两个数组转换为一个对象
var pageData = {id:id, rect:rect};
在代码触发之间设置一个范围。这里的范围是当部分元素的顶部在-200px至400px之间时触发。
if (pageData.rect > -200 && pageData.rect < 400) {
为确保不会向浏览器发送过多事件,只需通过检查pageData.id和location.hash是否已匹配来确保只运行一次即可。
if (pageData.rect > -100 && pageData.rect < 100) {
if (pageData.id !== location.hash.substr(1)) {
fragmentId = pageData.id;
setActiveLink(fragmentId);
} else {
return;
}
}
}
}
window.addEventListener('scroll', updateFragId);
我在这段代码块上使用了一个去抖动器,并与另一个块一起设置活动链接。但这只是跟踪#锚点的方法。
我认为你需要做类似于这样的事情。尚未实践过。
var myElements = $("div.anchor"); // You target anchors
$(window).scroll(function(e) {
var scrollTop = $(window).scrollTop();
myElements.each(function(el,i) {
if ($(this).offset().top > scrollTop && $(myElements[i+1]).offset().top < scrollTop) {
location.hash = this.id;
}
});
});