UPD：次のソリューションよりも機能しやすく、使いやすいnpmパッケージを作成しました。
私のsmoothScroll機能
私はSteve Bantonのすばらしい解決策を取り入れ、より使いやすくする関数を書きました。私が以前に試したように、それだけで、window.scroll()またはでも簡単ですwindow.scrollBy()が、これら2つにはいくつかの問題があります。
- スムーズな動作でそれらを使用すると、すべてがジャンクになります。
- とにかくそれらを防ぐことはできず、巻物と巻物まで待たなければなりません。ですから、私の機能があなたに役立つことを願っています。また、SafariやIEでも機能する軽量のポリフィルがあります。
これがコードです
コピーして、ごちゃごちゃしてください。
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
const prepareSmoothScroll = linkEl => {
const EXTRA_OFFSET = 0;
const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
const blockOption = linkEl.dataset.smoothScrollBlock || 'start';
if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
const anchorEl = document.createElement('div');
destinationEl.setAttribute('style', 'position: relative;');
anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);
destinationEl.appendChild(anchorEl);
linkEl.addEventListener('click', () => {
anchorEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
if (blockOption === 'center' || !EXTRA_OFFSET) {
linkEl.addEventListener('click', () => {
destinationEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
};
export const activateSmoothScroll = () => {
const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];
linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};
リンク要素を作成するには、次のデータ属性を追加するだけです。
data-smooth-scroll-to="element-id"
また、別の属性を追加として設定することもできます
data-smooth-scroll-block="center"
関数のblockオプションを表しますscrollIntoView()。デフォルトではですstart。MDNの詳細をご覧ください。
最後に
必要に応じて、smoothScroll関数を調整します。
たとえば、固定ヘッダーがある場合（または私がそれをと呼んでいるmasthead場合）、次のようなことができます。
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
そのようなケースがない場合は、削除してください。
scrollIntoViewは厄介です。