Question

嘿我试图在没有JQuery的情况下自动滚动到某个特定的地方/ ID。现在我有了这个带有JQuery的代码块，这会将我发送到带有autoscrool的指定ID。

＆＃13;

$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 900, 'linear');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>
<div id="one"></div>

＆＃13;

我希望做一些类似的效果但是 JavaScript ，有什么想法吗？

Answer 1

使用window.scroll和element.getBoundingClientRect().top仅使用javascript滚动效果时，这是您可以做的最佳选择，请参阅下面的演示

＆＃13;

#one {
  margin-top: 1000px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">one</a>

<div id="one">down-here</div>

<script type="text/javascript">
  (function() {
    let anchors = document.querySelectorAll('a[href*="#"]');

    anchors.forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        let id = this.getAttribute("href");
        let targetElement = document.querySelector(id)
        let scrollHeight = targetElement.getBoundingClientRect().top + window.scrollY;

        //scroll with smoooth effect
        window.scroll({
          top: scrollHeight,
          behavior: 'smooth'
        });
      });

    })

  })();
</script>

＆＃13;

如何使用JavaScript滚动到某个特定的地方/ ID？

1 个答案: