手动滚动到锚点时更改URL？
默认情况下，如果我在我的网站上有锚点，那么当我点击一个链接（即www.mysite.com/#anchor）时，地址栏上的URL就会改变
滚动到锚点时，是否可以立即更改地址栏中的URL？ 或者当我点击一个新锚点时，有一个包含多个锚点的长文档和地址栏上的URL更改？
尝试使用这个jquery插件： Scrollorama 。 它有很多很酷的function，您可以使用window.location.hash来更新浏览器哈希。
或者，您可以添加“滚动”事件以检查何时到达锚点。
这是一个说明事件的工作小提琴： http ： //jsfiddle.net/gugahoi/2ZjWP/8/示例：
$(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; } }); }); });
您可以使用HTML 5 pushstate更改地址栏中的URL
window.history.pushstate
- https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
- 我怎样才能’安全’使用window.history.pushState
- 将处理程序绑定到jquery滚动事件 。
- 使用此jquery脚本检查屏幕上当前是否可以看到锚点。
- 使用pushstate或设置位置（可能会导致跳转）
您可以绑定到jQuery滚动事件（ http://api.jquery.com/scroll/ ），并在每次调用回调时，通过检查此值来检查用户滚动文档的距离：.scrollTop（ http ：//api.jquery.com/scrollTop/ ）并通过操作te location.hash对象来设置锚点（ http://www.w3schools.com/jsref/prop_loc_hash.asp ）。
它会是这样的：
// Checks if the passed element is visible on the screen after scrolling // source: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling 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; } } });
如果您在选择锚点后对锚点进行排序，则可以更精确，以便始终设置第一个可见锚点。
我想你需要做这样的事情。 没有尝试过
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; } }); });`