WordPressの勉強がてら

WordPressの初心者が独学でホームページ作成したときの技術メモ

WordPressの勉強がてら

ページ内リンクをスムーズスクロール

      2014/12/10

サイト内を滑らかにスクロールさせます。

ほぼ必ずサイトの右下などに「Topへ戻る」ボタンがあって、ボタンを押すと滑らかにTOPへ移動するあれです。

ただWebで調べるとたいてい、「Topへ戻る」ボタンに id が振られていてそのボタンが押されたら~~~って処理を書いています。

それだと面倒なので、ページ内リンクは全て同じ処理を使うことにしました。

スポンサーリンク

 

Aタグのリンクが#で始まるものに適応させる

$(‘a[href^=#]’)を指定することでページ内リンクを抽出させる

//ページ内リンクのスクロール
$(function(){
// #で始まるアンカーをクリックした場合に処理
    $('a[href^=#]').click(function() {
        // スクロールの速度
        var speed = 400; // ミリ秒
        // アンカーの値取得
        var href= $(this).attr("href");
        // 移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top;
        // スムーススクロール
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });

});

「Topへ戻る」ボタンは
<a href=”#”>Topへ戻る</a> とでもしておけばよい。

 

ちょっとスクロールしたら表示させる

「Topへ戻る」ボタンをちょっとスクロースさせたら表示させたい場合は、ボタンにidを付けて下記のようにすればよい

var pagetop = $('#pagetop');

$(window).scroll(function(){
    if ( $(this).scrollTop() > 500 ) { //500pxスクロールで表示
        pagetop.fadeIn();
    } else {
        pagetop.fadeOut();
    }
});

 

おわり

 

 - jQuery

  • このエントリーをはてなブックマークに追加

  関連記事

thum_jquery
flexslider2のカルーセルをレスポンシブ対応する

カルーセルスライダーをレスポンシブ対応しました。有名なflexsliderで実装 …

thum_jquery
flexsliderのmanualControlsを使ってサムネイルと連動させる

便利で有名なjqueryのスライダープラグインflexsliderですが、man …

thum_jquery
スクロールしたときに画像を読み込むことでページの表示を高速化させる

スマートフォン向けのサイトなど下に長く画像がたくさんあるページはよくあります。通 …

thum_jquery
jScrollPaneをレスポンシブ対応する

スクロースバーを使うときはいつも「jScrollPane」を使ってます。使い方は …

thum_jquery
スクロールバーをかっこよくデザインする

新着情報などトップページに固定サイズの枠内で表示させるとき、デフォルトの状態だと …