在页面内链接

Question

我见过很多网站linking in the same page (demo)
此系统中的问题是，当您在单击链接（指向所选区域）后重新加载页面时，页面会立即滚动到所选区域，因为链接上的单击会在#name上留下#name URL页面（即使在重新加载时），例如：

  

www.example.com/#down

我也看到了网站，他们没有将{{1}}添加到网址行，但您仍然引用了链接区域。
我猜这是由jQuery或Javascript制作但我无法找到（检查元素和页面的源代码）代码（我在高科技网站中发现了这个系统，他们有很多js文件找到它很复杂。

我真正的问题是：如何在不使用 哈希标记|名称 系统的情况下在我的网站中进行链接？

Answer 1

您描述的行为是锚点的预期行为。如has been said ...

  

默认情况下，网站不会被破坏，它们具有功能性，高性能和可访问性。你打破了他们。

您可以让事件侦听器检测链接上的点击并相应地滚动。 jQuery会是这样的：

$(document).on("click", "a[href*='#']", function(evt) {
    evt.preventDefault();
    var target = this.href.split("#")[1];
    var elm = document.getElementById(target);
    if( elm) elm.scrollIntoView(); // or replace with fancy scrollTo plugin
});

但是，请注意，执行此操作会降低可用性。来自xkcd ...

Answer 2

Working DEMO

HTML：

  <a href="#demo">GO SEE THE DEMO</a>

jQuery的：

$("a").click(function(event) {
  event.preventDefault();
  var divId = $(this).attr('href');
  $('html, body').animate({
            scrollTop: $(divId).offset().top 
        }, 500);
});