使用 URL 中不带 # 的锚点滚动答案

【问题标题】：Scroll with anchor without # in URL使用 URL 中不带 # 的锚点滚动
【发布时间】：2013-02-19 19:22:18
【问题描述】：

我需要使用anchor tag 滚动浏览页面。

我现在正在做：

<a href="#div1">Link1</a>

<div id='div1'>link1 points me!!</div>

当我点击 Link1 时效果很好，页面滚动到 id 为“div1”的 div。
关键是，一旦我点击Link1，我不想更改以#div 作为后缀的URL。

我尝试使用锚href作为

void(0);

和

location.hash='#div1';
return false;

e.preventdefault;

如何避免更改网址？

【问题讨论】：

标签： javascript html hash

【解决方案1】：

使用 jQuery 的动画从 Jeff Hines 那里得到这个答案：

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

如果您使用 jQuery，请不要忘记将库添加到您的项目中。

编辑：另外，请确保您仍然“返回 false；”在链接的点击处理程序中，否则它仍会将“#div1”添加到您的 URL（感谢@niacurshi）

【讨论】：

另外，请确保您仍然在链接的点击处理程序中“返回 false”，否则它仍会将“#div1”添加到您的 URL
这很好用。在旧的 # 锚标记上花了很多时间，但是当有一堆脚本时，它们似乎会“损坏”。

【解决方案2】：

scrollIntoView 在所有其他方法都失败时做得最好！

document.getElementById('top').scrollIntoView(true);

其中'top'是你想去的html标签的id。

【讨论】：

非常感谢亲爱的！
支持，尽管我上次尝试时由于某种原因对我不起作用。
这是一个比接受的解决方案更好的解决方案，因为当我使用接受的解决方案时，它不会考虑滚动到位置上方或下方的任何边距。结果，当滚动完成时，部分文本被截断。
虽然我喜欢这个答案，但它也无法将焦点集中在您滚动的位置。例如，如果您有可访问用户的“跳到主要内容”链接，并且您想滚动到主要内容，则使用此链接不会将焦点移动到主要内容区域。
scrollIntoViewOptions 但在 Safari 中不起作用。

【解决方案3】：

让您的生活更轻松，尝试以下方法，如果还有其他问题，请告诉我 ;-)

<div>top</div>
<div style="height: 800px;">&nbsp;</div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>

仅供参考：您只需要使用一条/单行 href="javascript:void(0);" onclick="window.scroll(0,1);" 即可。

祝你有美好的一天！

【讨论】：

【解决方案4】：

仅在文档准备好时将此代码添加到 jquery 中

参考：http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(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;
      }
    }
  });
});

【讨论】：

【解决方案5】：

为任何项目点击添加平滑滚动，包括锚点、按钮等，而无需将 div id 添加到 URL :)

信息： scrollIntoViewOptions（可选） { 行为：“自动”| “即时” | “光滑的”，块：“开始”| “结尾”， }

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}

#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

<button onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</button>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>

DEMO

参考：https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

【讨论】：

【解决方案6】：

我知道我迟到了 4 年，但你们可以试试这个。

HTML：

<a href="#div1">Link1</a>
<!-- you can put <br />'s here to see effect -->
<div id='div1'>link1 points me!!</div>
<!-- <br />'s here, too, to see effect -->

JavaScript/jQuery

$(document).ready(function(){
    $('a').on('click', function(event) {
        event.preventDefault();
        var hash = this.hash;
        $('html, body').animate({scrollTop: $(hash).offset().top}, 900);
    });
})

【讨论】：

这真的很糟糕。正如您单击 ANY 锚标记时所写的那样，您将初始化此函数。您应该定位一个特定的 ID。此外，您的解决方案不起作用。
效果很好，你只需要定义类而不是通用的“a”标签

【解决方案7】：

复制Henser's answer，我有一个情况，window.location.hash 已经设置，然后用户滚动回到页面顶部（哈希链接所在的位置）。

由于已经设置了哈希，您可以通过单击该链接重新定位：

$(window).scrollTop($('a[name='+id+']').offset().top);

【讨论】：

【解决方案8】：

document.getElementById('top').scrollIntoView(true);

应该适用于所有浏览器，经过测试！

【讨论】：