Question

我想在一个页面中创建一个多站点，每次点击一个链接时，它会自动滚动到页面中的那个元素（所有div元素）。
该函数可以工作，但它仍然跳转到给定的元素。

这是我到目前为止所获得的代码以及用于调用函数的元素：

<li class="topli">
    <a id="toplink" onclick="Scroll('#home')" href="javascript:void(0);">HOME</a>
</li>

<script>
    function Scroll(element) {
        var ID = element.split('#').join('');
        var target = document.getElementById(ID);
        var offset = target.getBoundingClientRect();

        console.log("X:",offset.x,"Y:",offset.y);

        if (window.scrollY != offset.y) {
            window.scroll(window.scrollY, offset.y);
        }

        if (window.scrollX != offset.x) {
            window.scroll(window.scrollX, offset.x);
        }
    }
</script>

如果需要，我会向JSFiddle添加更详细的代码。

Answer 1

为此

创建jQuery帮助器

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');

        return this; 
}
})(jQuery);

并使用

$('#el').goTo();

Answer 2

尝试将其垂直滚动（其中100是滚动率）：

const goTo = (targetEl) => {
  const elm = document.querySelector(targetEl);
  const offset = elm.getBoundingClientRect().bottom;
  if (offset > window.innerHeight) {
    window.scroll(0, window.scrollY + 100);
    setTimeout(() => {
      goTo(targetEl);
    }, 16.666);
  } else {
    return;
  }
};

这样称呼：

goTo('#scroll-target');

或点击：

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.long-div').addEventListener('click', () => {
    goTo('#scroll-target');
  });
});

Answer 3

垂直平滑滚动，简单而原生的方式：

let element = document.querySelector('#element');

// Vertical Scroll
this.element.scrollTo({
    left: element.offsetLeft,
    behavior: 'smooth'
})

// Horizontal Scroll
element.scrollIntoView({block: "end", behavior: "smooth"});

文档：

JS Smooth Scroll Vertical＆amp;水平函数

3 个答案: