表題の通り、location.hrefでスムーズスクロールは可能でしょうか。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
scroll-behavior プロパティがあります。
まだWDですが、複数の実装があります。
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior
https://www.w3.org/TR/cssom-view-1/#propdef-scroll-behavior
CSS
1html { 2 overflow-y: auto; 3} 4 5body { 6 height: 100vh; 7 overflow-y: auto; 8 scroll-behavior: smooth; 9}
JavaScript
1location.href = '#hoge';
投稿2017/09/14 07:36
総合スコア13749
0
location.hrefだけではスムーススクロールはできないので
素直にjQueryやその他のアニメーションライブラリを使用するか、自前で用意するしかありません。
jQueryを使用しないピュアなJavaScriptでスムーススクロールを実装するには
以下のコードを追加します(拾い物ですが…)
JavaScript
1function scrollToY(scrollTargetY = 0, speed = 2000, easing = 'easeOutSine') { 2 // scrollTargetY: 目標とする要素のページ全体におけるy座標 3 // speed: アニメーションの速さ 4 // easing: イージング 5 const scrollY = window.scrollY || document.documentElement.scrollTop; 6 let currentTime = 0; 7 const time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8)); 8 // easing equations from https://github.com/danro/easing-js/blob/master/easing.js 9 const easingEquations = { 10 easeOutSine: function (pos) { 11 return Math.sin(pos * (Math.PI / 2)); 12 }, 13 easeInOutSine: function (pos) { 14 return (-0.5 * (Math.cos(Math.PI * pos) - 1)); 15 }, 16 easeInOutQuint: function (pos) { 17 if ((pos /= 0.5) < 1) { 18 return 0.5 * Math.pow(pos, 5); 19 } 20 return 0.5 * (Math.pow((pos - 2), 5) + 2); 21 } 22 }; 23 // アニメーション関数 24 +function tick() { 25 currentTime += 1 / 60; 26 const p = currentTime / time; 27 const t = easingEquations[easing](p); 28 if (p < 1) { 29 requestAnimationFrame(tick); 30 window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t)); 31 } else { 32 window.scrollTo(0, scrollTargetY); 33 } 34 }(); 35}
以下のようにすれば動きます。
JavaScript
1const sample = document.getElementById('sample'); 2const sampleOffsetTop = sample.getBoundingClientRect().top + window.scrollY; 3scrollToY(sampleOffsetTop, 3000, 'easeInOutSine');
ちなみに、+function() { /* ごにょごにょ */ }();
は即時関数です。
補足
Chrome, Firefoxで動作確認済み。
IE, Edgeは確認してません。
質問者さんの意図が少しばかり汲み取れませんでしたので、勢いで投稿してしまいました…
私の考えていた回答とは違う!って場合はご指摘ください。
投稿2017/09/13 04:00
編集2017/09/13 05:12総合スコア13
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。