Help us understand the problem. What is going on with this article?

jQuery ページ内リンクと先頭に戻るスムーズスクロール

More than 3 years have passed since last update.

仕様

  • ページ内リンク(ハッシュ#)はその位置までスクロール
  • Page Topボタンを押すと先頭までスクロール
  • Page Topボタンはある程度スクロールしたらふわっと出るようにしたい。

デモ

https://jsfiddle.net/gatespace/bwqsed6m/

ソース

CSSとHTMLのマークアップはおこのみで。
jQuery 1.12〜3.x.x でも動くよ。

page-top.html
<div id="page-top"><a href="#_top">Page Top</a></div>

<a href="#"> としていないのは、他のJavaScriptでそのような指定があるときバッティングしないようにするため。

page-scroll.js
(function($){

    /*
     * jQuery page scroll
     */

    var topBtn  = $('#page-top'); // 先頭に戻るボタンの入るDOM
    var topHash = '#_top'; // 先頭に戻るボタンのhrefの中身
    var viewPos = 100; // 先頭に戻るボタンが表示され始める位置

    // jQuery 1.9 以降用のブラウザ判定
    var isHtmlScroll = (function() {
        var html = $('html'),
        top = html.scrollTop();
        var el = $('<div/>').height(10000).prependTo('body');
        html.scrollTop(10000);
        var rs = !!html.scrollTop();
        html.scrollTop(top);
        el.remove();
        return rs;
    })();

    // 先頭に戻るボタンの表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > viewPos ) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });

    $('a[href*=\\#]:not([href=\\#])').click( function() { // スムーズスクロール
        var href = this.hash;
        var $target = $(href == topHash || href == "" ? 'body' : href);
        if ( $target.length > 0 ) {
            var top = $target.offset().top;
            $(isHtmlScroll ? 'html' : 'body').animate({
                scrollTop: top
            }, 'slow', 'swing');
        }
        return false;
    });
})(jQuery);
gatespace
仙台で働く(株)デジタルキューブ(め組)の Director。 _s Contributor / JAWS-UG 東北 / 網元起動隊
https://gatespace.jp/
digitalcubeinc
デジタルキューブは AWS Partner Network (APN) アドバンスドテクノロジーパートナーです。
https://ja.amimoto-ami.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away