Question

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

现在我正在做：

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

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

当我点击Link1时页面滚动到id为“div1”的div 关键是，我点击#div后，我不想更改以Link1为后缀的网址。

我尝试使用锚点href作为

void(0);

和

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

e.preventdefault;

如何避免更改网址？

Answer 1

使用jQuery的animate来获取Jeff Hines的答案：

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

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

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

Answer 2

当所有其他方法都失败时，

scrollIntoView做得最好！

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

其中'top'是您要去的html标记的ID。

Answer 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);"，它就适合您。

祝你有个美好的一天！

Answer 4

在henser的回答中，我有一个案例，其中window.location.hash已经设置，然后用户滚动回到页面顶部（哈希链接所在的位置）。

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

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

Answer 5

仅在文档就绪

中将此代码添加到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;
      }
    }
  });
});

Answer 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);
    });
})

Answer 7

在没有添加div id的情况下，向任意项目单击添加平滑滚动，包括锚，按钮等：

信息： 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

在URL中滚动没有＃的锚点

7 个答案: