シンプルなコードで作れるページ内スムーススクローラー

Ads

Result

jQuery

//クリックイベント
$('a[href*="#"]').click(function(event){
        event.preventDefault();
        var f = this.href;
        //文字列を区切る
        var p = f.split("#");
        var t = p[1];
        var to = $("#"+t).offset();
        var tt = to.top;
        //取得した位置にスクロール
        $('html, body').animate({scrollTop:tt},500);
    });

html

<div id="top">HOME or go <a href="#bottom">bottom</a></div>
<a href="#top" id="bottom">top</a>

via

Scroll effect with local anchors – Jquery | Beschi’s Works


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7