35

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

现在我正在做：

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

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

当我单击 Link1 时，这工作正常，页面滚动到 id 为“div1”的 div。
关键是，我不想更改我#div点击后作为后缀的 URL Link1。

我尝试使用锚href作为

void(0);

和

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

e.preventdefault;

如何避免更改 URL？

4

8 回答 8

47

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

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

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

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

于 2013-03-05T11:50:56.710 回答
45

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

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

'top'你想去的html标签的id在哪里。

于 2016-05-17T14:49:51.903 回答
8

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

<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);"就可以了。

祝你有美好的一天！

于 2013-03-05T13:29:10.670 回答
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;
      }
    }
  });
});
于 2014-11-25T14:46:55.813 回答
2

为任何项目单击添加平滑滚动，包括锚点、按钮等，而无需将 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>

演示

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

于 2018-08-18T08:06:09.103 回答
1

摆脱 Henser的回答，我有一个已经设置好的情况，window.location.hash然后用户滚动回页面顶部（哈希链接所在的位置）。

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

$(window).scrollTop($('a[name='+id+']').offset().top);
于 2015-08-28T17:10:11.687 回答
1

我知道我迟到了 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);
    });
})
于 2017-06-14T10:33:05.210 回答
0 
document.getElementById('top').scrollIntoView(true);

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

于 2022-01-29T14:30:27.317 回答