為什么我的錨標簽無法平滑滾動？

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>

該鏈接起作用，因為它將用戶定向到錨點，但是沒有平滑的滾動。

Answer 1

您在index.js塊可能應該包裝在$(document).ready( function(){ /* your code here */ }); 如上文DanielD所述。

同樣，您不需要.js文件中的<script></script>標記。 這將導致解析錯誤。

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;
            }
        }
    });
});