jQuery平滑滾動不滾動

我試圖添加平滑滾動到我的網站中的指定錨點。我有一個jQuery插件，只需調用內部命名錨點併爲html和body設置動畫。我以前在其他網站上使用它，它工作正常，但我不明白爲什麼它不在這裏工作。奇怪的是，相同的代碼在Apple Safari中運行良好，但不是谷歌瀏覽器。我使用過的所有其他網站都在Chrome中正常運行。我無法弄清楚這一點。jQuery平滑滾動不滾動

以下是我的HTML。它只是一個帶有標籤的div和下面div中的匹配錨點。

<div id="slide1" class="slide"> 
<a href="#section"> 
<div id="scrollbtn"> 
<img src="images/downarrow.png" alt="Down Arrow"> 
</div> 
</a> 
</div> 


<div id="main"> 
<a id="section" class="link"></a> 
<p>Test</p> 
</div>

下面是jQuery的插件。它在我用過的其他網站中運行良好，我不明白爲什麼它不在這裏工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(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 
     }, 500); 
     return false; 
     } 
    } 
    }); 
}); 
</script>

任何幫助將不勝感激。

來源

2016-05-10 brodym46

嘗試將您的選擇器從$（'a [href * =＃]：not（[href =＃]）''）更改爲$（'a'）並進行測試。有時只是選擇器有一個你無法接受的錯誤。 – Brett

你需要引用屬性選擇器的值$（'a [href^=「＃」]：not（[href =「＃」]'） – Steffen

$(function() { 
    $('a').bind('click',function(event){ 
     var $anchor = $(this); 

     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 800); 
     event.preventDefault(); 
    }); 
});

是另一種製作方法。

Codepen

留你一Codepen工作。讓我知道什麼是給你的問題。

來源

2016-05-10 01:45:21

它仍然不起作用。在Chrome中，它阻止它，它不會跳到沒有滾動的錨點，它只是不動。 – brodym46

我更新了。看看codepen，如果仍然無法使用，請告訴我看看發生了什麼 –

它仍然沒有工作，甚至不是代碼不工作，它只是跳轉到錨點，頁面不移動，當我拿出代碼時，它跳轉正確的位置 – brodym46

jQuery平滑滾動不滾動

回答

相關問題