javascript - 为什么我的 anchor 标签滚动不流畅？

Question

我已经在头部添加了这个

<script type="text/javascript" src="js/index.js"></script>

这是导航到“id="fillerSix"”div 标签的链接。

<h1><a href="#fillerSix">Mohammad Usman Khan</a></h1>

这是链接应该导航到的 id="fillerSix"。

<div id="fillerSix" class="fillerSix">

这是我的 index.js 文件

<script type="text/javascript">
$('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});
</script>

该链接有效，因为它将用户定向到 anchor 但没有平滑滚动。

Answer 1

您在 index.js 中的区 block 应该包裹在 $(document).ready( function(){ /* your code here */ }); 中如上面的 DanielD 所示。

同样你不需要<script></script> .js 内的标签文件。这将导致解析错误。

index.js的新内容| :

$(document).ready( function(){
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
            || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});