スムーススクロールアンカーリンクjQueryなし

Question

スムーススクロールを使用してリンクをアンカーできますが、はjQueryなしですか？私は新しいサイトを作成しています。私はjQueryを使いたくありません。ここから機能を使用して

Answer 1

：

function animate(elem, style, unit, from, to, time, prop) { 
    if (!elem) { 
     return; 
    } 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1, (new Date().getTime() - start)/time); 
      if (prop) { 
       elem[style] = (from + step * (to - from))+unit; 
      } else { 
       elem.style[style] = (from + step * (to - from))+unit; 
      } 
      if (step === 1) { 
       clearInterval(timer); 
      } 
     }, 25); 
    if (prop) { 
      elem[style] = from+unit; 
    } else { 
      elem.style[style] = from+unit; 
    } 
} 

window.onload = function() { 
    var target = document.getElementById("div5"); 
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true); 
}; 

DEMO：https://jsfiddle.net/zpu16nen/

メイクJavaScript animationとプロパティ（スタイルのプロパティだけではなく）を変更するためにそれを修正するには、このような何かを試すことができます実際にはスクロールバーがあり、5番目のdivにスクロールできるように、ウィンドウのサイズを十分小さくしてください。

いいえ、jQueryの25％を再作成する必要はありませんでした。

これは明らかに、質問が実際に何を意味するか（例えば、ウィンドウのハッシュが変更されたときなど）によって大きく変更される必要があります。

$(document).ready(function() { 
    $("html, body").animate({ 
     scrollTop: $("#div5").offset().top 
    }, 2000); 
}); 

はDEMO：http://jsfiddle.net/7TAa2/1/

ちょうど言って... :targetセレクタと

Answer 2

CSS3遷移が素敵な結果を与えることができますjQueryを使って、それは同じように簡単だということ

注意JSのハッキングは一切ありません。私はこれを実現するかどうかを検討していたが、Jqueryがなければちょっと乱雑になる。詳細については、this questionを参照してください。

Answer 3

この回答を拡張：https://stackoverflow.com/a/8918062/3851798

をscrollToのあなたの関数を定義した後、あなたが関数内scrollToにしたい要素を渡すことができます。

function scrollTo(element, to, duration) { 
    if (duration <= 0) return; 
    var difference = to - element.scrollTop; 
    var perTick = difference/duration * 10; 

    setTimeout(function() { 
     element.scrollTop = element.scrollTop + perTick; 
     if (element.scrollTop === to) return; 
     scrollTo(element, to, duration - 10); 
    }, 10); 
} 

あなたにid = "フッター" あなたはあなたがこれを実行することができますスクロールするために実行するスクリプトで

<div id="footer" class="categories">…</div> 

、あなたが持っている

elmnt = document.getElementById("footer"); 
scrollTo(document.body, elmnt.offsetTop, 600); 

そして、そこでのdivを持っている場合それ。 jQueryを使わずにスムーズにスクロールできます。あなたは実際にあなたのブラウザのコンソール上でそのコードで遊んで、好きなように微調整することができます。

Answer 4

このjavascriptライブラリを使用して、すべての内部リンクに円滑なスクロールを追加できます。 設定を追加して、無視するリンクを提供することもできます。 詳細はこちらをご覧ください。 https://codingninjascodes.github.io/SmoothScrollJs/

Answer 5

ピュア軽量のJavaScriptライブラリー：smooth-scroll on github

Answer 6

実は、それを行うために、より軽量かつ簡単な方法があります： https://codepen.io/ugg0t/pen/mqBBBY

function scrollTo(element) { 
 
    window.scroll({ 
 
    behavior: 'smooth', 
 
    left: 0, 
 
    top: element.offsetTop 
 
    }); 
 
} 
 

 
document.getElementById("button").addEventListener('click',() => { 
 
    scrollTo(document.getElementById("8")); 
 
});

div { 
 
    width: 100%; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
div:nth-child(odd) { 
 
    background-color: white; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 10px; 
 
}

<div id="1"></div> 
 
<div id="2"></div> 
 
<div id="3"></div> 
 
<div id="4"></div> 
 
<div id="5"></div> 
 
<div id="6"></div> 
 
<div id="7"></div> 
 
<div id="8"></div> 
 
<div id="9"></div> 
 
<div id="10"></div> 
 
<button id="button">Button</button>

Answer 7

この使用：

は、

let element = document.getElementById("box"); 

element.scrollIntoView(); 
element.scrollIntoView(false); 
element.scrollIntoView({block: "end"}); 
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"}); 

DEMO：https://jsfiddle.net/anderpo/x8ucc5ak/1/

Answer 8

私のお気に入りのスクロールのライブラリは現在のでwide range of featuresと小さいサイズ（現在は3.17キロバイト）のZenscrollです。

ネイティブのscrollIntoView機能を使用する方が意味があるかもしれませんが、現在IEのサポートが不足しているため、ほとんどのプロダクションサイトでpolyfilledする必要があるため、代わりにZenscrollを使用することをおすすめします。