jquery滾動到頂部的動畫

嗨，我知道這個問題已被問及很多回答，但即使這樣我似乎無法弄清楚我要去哪裏錯了。我試圖使用頁面末尾的「返回頂部」按鈕創建一個scrollTop動畫，但它似乎沒有工作。jquery滾動到頂部的動畫

的代碼如下：

HTML

<h2 class="bottom-border extra-bottom-margin"><a href="#" class="go-to-top">Back to top</a></h2>.

JQUERY

<script> 
$(function(){ 
$(".go-to-top").click(function(event){ 
    event.preventDefault(); 
    $("html, body").animate({"scrollTop": "0px"}, 100); 
}) 
}); 
</script>

的網址是http://mike-griffin.com/about-me.html

任何幫助都將不勝感激。先謝謝你！

來源

2014-09-26 ironmike

出現的滾動條屬於您的.container元素，而不是主體。

觀察它的動作，當你刪除CSS屬性：從.container風格

overflow-x: hidden;

。

或者修復：

<script> 

    $(".go-to-top").click(function(event){ 
     event.preventDefault(); 
     $(".container").animate({"scrollTop": "0px"}, 100); 
    }) 

</script>

來源

2014-09-26 01:09:49 TheStatehz

啊我看到了...我工作時，它被刪除，但它然後弄亂了一些元素的佈局...有沒有工作？我可以修改jquery來實現容器的滾動條嗎？謝謝你的幫助！ :) – ironmike 2014-09-26 01:16:33

查看更新：$（「。container」）。animate（{「scrollTop」：「0px」}，100）; – TheStatehz 2014-09-26 01:17:39

嗯，我剛剛這樣做，完美的工作，我已經瞭解了一點關於JQuery的，謝謝！我沒有聲望投票:(再次感謝！ – ironmike 2014-09-26 01:22:31

你在這裏張貼應該工作的代碼，但是這並不是說你有你的網站的代碼。

在網站上，你有這樣的：

$(function(){ 
    $(".go-to-top").click(function(event){ 
     event.preventDefault(); 
     $("body").animate({"scrollTop": "0px"}, 1000); 
    }) 
});

要使其工作，改變$("body")到$("html, body")。原因是瀏覽器兼容性 - 某些瀏覽器將滾動位置應用於document.documentElement（html），而其他瀏覽器將其應用於document.body（主體）。

來源

2014-09-26 01:13:53 fstanis

感謝您的幫助我已經將它應用於.container元素，現在似乎正在完美工作，謝謝！ – ironmike 2014-09-26 01:23:23

jquery滾動到頂部的動畫

回答

相關問題