jsはアンカーポイントと協力してアニメーションのスクロールと傍受を実現する

このスキルはいい感じで、bootstrapに合わせて書きました.以下は乾物です.ulのliの各aのhrefはアンカーターゲットを指しています.例えば、Home。次に、私が見つけたソースコードを示します.

$('#navbar-menu ul li a[href^="#"]').click(function(e){
                    e.preventDefault();
                    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 400);
                });

クリックすると、まずデフォルトの動作をブロックし、htmlとbodyをアニメーションにスクロールさせ、上部からの距離をターゲットとするoffset()にスクロールさせます.トップの距離は、4ミリ秒以内に完了します.hash属性は、URLのアンカー部分(番号から始まる部分)である読み書き可能な文字列であるため、this.hashとは、現在のアドレスの#部分を指します.この表現の対象については、後でまとめます.ps:$('body').scrollspy({ target: '#menu-nav' })このbootstrapのscrollspyプラグインは、ターゲットのスクロールを自動的に監視し、対応するactiveを変更するのがいいです.