JSスムーススクロール垂直＆水平機能

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

この

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

     return this; 
} 
})(jQuery); 

のためのjQueryのヘルパーを作成し、（100は、スクロールのレートである）垂直方向にスクロールするためにこれを試してみてください

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

Answer 2

のように使用します。

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