Javascript 在URL中使用不带#的锚点滚动

我需要使用

锚定标记

滚动浏览页面

现在我正在做：

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

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

及

---

如何避免更改URL？

请使用jQuery的动画从Jeff Hines那里获得以下答案：

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

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

---

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

为了让您的生活更轻松，请尝试以下操作，如果还有其他内容，请告诉我；-）

顶部

FYI:您只需要玩一行/单行

href=“javascript:void（0）；“onclick=“window.scroll（0,1）；”

就可以了

---

祝你有愉快的一天

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

参考：

最后，我有一个例子，已经设置了

window.location.hash

，然后用户滚动回到页面顶部（散列链接所在的位置）

由于已设置哈希，您可以通过以下方式在单击该链接时重新定位：

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

---

scrollIntoView

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

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

---

其中，

'top'

是您想要使用的html标记的id。

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

HTML:

---

将平滑滚动添加到任何项目单击，包括锚定、按钮等，而不将div id添加到URL:）

信息： 滚动查看选项（可选） { 行为：“自动”|“即时”|“平滑”， 块：“开始”|“结束”， }

函数scrollSmoothTo（elementId）{
var element=document.getElementById（elementId）；
element.ScrollingToView({
块：“开始”，
行为：“平滑”
});
}

#userdiv{
利润上限：200px；
宽度：200px；
高度：400px；
边框：1px纯红；
}

滚动到userdiv
这是一个随机文本

此外，请确保链接的单击处理程序中仍然“return false”，否则它仍然会将“#div1”添加到URL中。这很好。花了很多时间在旧的#锚定标签上，但当有一大堆脚本时，它们似乎会被“破坏”。这真的很糟糕。正如您单击任何锚定标记时所写，您将初始化此函数。您应该针对特定的ID。此外，您的解决方案不起作用。它工作得很好您只需要定义类而不是通用的“a”标记谢谢亲爱的！上一次我尝试时，由于某种原因，这对我来说不起作用。这是一个比接受的解决方案更好的解决方案，因为当我使用接受的解决方案时，它不考虑滚动到的位置上方或下方的任何边距。结果，当滚动完成时，部分文本被切掉。虽然我喜欢这个答案，但它也无法将焦点转移到滚动的地方。例如，如果您有可访问用户的“跳到主要内容”链接，并且您希望滚动到主要内容，则使用此链接不会将焦点移动到主要内容区域。

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

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

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

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

<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 -->

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