読者です 読者をやめる 読者になる 読者になる

Shiho's engineering blog

誰でもみれるノートのようなもの

ボタンを押したらスクロールダウンが始まり、指定の位置まで下がっていく実装をデザインまで[javascript, jQuery, css]

javascript デザイン フロントエンド

f:id:serendipity4u:20170417173148p:plain

想定するhtml構造

 
<a href="" id="scroll_button">
Scroll
</a>
...
↓ 下がっていく
...
<div id="target">
ここまで来てね
</div>

jQueryで実装

向かいたい先の位置を変数positionに入れる。
var position = $("#target").offset().top; //最初の要素の、ドキュメント上での表示位置[y軸]を返す


$("#scroll_button").click(function(){
    $("html,body").animate({
        scrollTop : position // さっき変数に入れた位置まで
    }, {
        queue : false // どれくらい経過してから、アニメーションを始めるか。キュー[待ち行列]。falseを指定すると、キューに追加されずに即座にアニメーションを実行。
    });
});

javascriptなら[非推奨]

var target = document.getElementById("target");
target.scrollIntoView({
  behavior: "smooth"
  }
); //要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールする

CSS

こちらのまとめが素晴らしい。CSSだけで動きもデザイン。

[CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10] (http://www.nxworld.net/tips/css-scroll-down-button.html)

個人的に、波形がポワポワでるやつが好き。 prott のLPにもこういうボタンがあって、気になっていた。 ポワポワがないより、ある方がCVが高くなりそう(というかグッドパッチさんがやっているということはそうなのでしょう)。

実装してみた。 Screen Shot 2017-04-10 at 1.25.14 PM.png

プロットのHPより

Screen Shot 2017-04-10 at 1.28.04 PM.png

jQeuryを読み込んでいるのに、$ is not definedエラーが出たら?

このようなメソッドがどこかで宣言されている可能性がある。

jQuery.noConflict()

この関数を実行すると、$関数の動作が先に定義されている動作に戻る。

$関数ではなくjQuery関数を使う、もしくは、以下のように即時関数の中で$を使うことで対応できる。

//ここから実行したいスクリプトを書く
(function($) {

$('#sample').click(function() {

    //いつもどおり$が使える

});

})(jQuery);

 参考

jQueryを利用して,任意の場所にスクロールして移動する方法 Element.scrollIntoView()