133

當點擊一個按鈕時，我將頁面設置爲滾動到頂部。但首先我使用if語句來查看頁面頂部是否未設置爲0.然後，如果它不是0，則將頁面設置爲動畫滾動到頂部。jQuery .scrollTop（）; +動畫

var body = $("body"); 
var top = body.scrollTop() // Get position of the body 

if(top!=0) 
{ 
    body.animate({scrollTop:0}, '500'); 
}

棘手的部分現在是動畫的東西后，頁面已滾動到頂部。所以我的下一個想法是，找出頁面的位置。所以我使用控制檯日誌來查明。

console.log(top); // the result was 365

這給了我一個結果365，我猜那是位置號碼我是在剛剛滾動到前上方。

我的問題是如何將位置設置爲0，以便我可以添加另一個頁面處於0時運行的動畫？

謝謝！

來源

2013-05-10 Juan Di Diego

需要啓動事件的按鈕始終可見？如果不是那麼我有一個代碼，不需要任何形式的條件，可以做你的第一個條件容易 – 2013-05-10 04:42:23

毫秒不應該引號。文檔所指的「字符串」是緩慢/快速的 – mplungjan 2017-05-04 07:19:24

238

爲此，您可以爲滾動動畫完成後執行的animate命令設置回調函數。

例如：

var body = $("html, body"); 
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
    alert("Finished animating"); 
});

如果該警報代碼，你可以執行更多的JavaScript來進一步動畫添加。

另外，'擺動'在那裏設置緩動。查看http://api.jquery.com/animate/瞭解更多信息。

來源

2013-05-10 04:34:27

謝謝托馬斯，這就是我所需要的。由於課程添加得如此之快，我還添加了延遲。 if（top！= 0） { console.log（「hidden scroll」）; （1000）.removeClass（「幻燈片」）（）{0}，{0}，{0}，{0} ; \t }）; } – 2013-05-10 04:49:11

當我只有2個動畫函數的參數時，我不得不提及沒有引號的動畫持續時間。那很奇怪。 – iMatoria 2013-12-09 01:51:05

我不確定是否因爲這篇文章是4歲，但我認爲在更新版本的jQuery中，您需要刪除圍繞時間的單引號：body.animate（{scrollTop：0}，500，'swing' ，函數（）{alert（「Finished animating」）; }）; – Andrew 2014-06-10 21:54:31

爲此，你可以使用回調方法

body.animate({ 
     scrollTop:0 
    }, 500, 
    function(){} // callback method use this space how you like 
);

來源

2013-05-10 04:37:30

試試這個：

var body = $("body, html"); 
var top = body.scrollTop() // Get position of the body 
if(top!=0) 
{ 
     body.animate({scrollTop :0}, 500,function(){ 
     //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED 
      alert('Hello'); 
     }); 
}

來源

2013-05-10 04:39:44

試試這個代碼：

$('.Classname').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
});

來源

2013-05-10 04:42:10 Shailesh

應該用$（「html」）來代替，因爲在你的情況下，如果你添加一個回調函數，它將被調用兩次，一次爲* html *，一次爲* body *。而使用* body *什麼都不做。 – Flawyte 2013-12-13 15:47:25

看來取決於瀏覽器。在某些情況下，$（'html'）可能不會執行任何操作，因此您需要同時使用兩個觸發器，並處理兩次觸發的回調。 – commonpike 2014-02-09 11:55:16

使用此：

$('a[href^="#"]').on('click', function(event) { 

    var target = $($(this).attr('href')); 

    if(target.length) { 
     event.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
    } 

});

來源

2015-02-17 15:21:09 Beep

這是最好的方法。非常感謝。 – programmer138200 2016-01-26 13:35:34

np希望你發現它有用 – Beep 2016-01-27 15:05:29

對此的另一個投票，很好，簡潔。 – phynam 2016-07-14 00:14:34

代碼與點擊功能（）

var body = $('html, body'); 

    $('.toTop').click(function(e){ 
     e.preventDefault(); 
     body.animate({scrollTop:0}, 500, 'swing'); 

});

.toTop =類點擊的元素的也許img或a

來源

2015-04-05 13:54:37 Scorby

jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
     alert("Finished animating"); 
    });

來源

2017-10-18 07:44:52

簡單的解決方案：

由ID或NAME滾動到任何元件：

SmoothScrollTo("elementId", 1000);

代碼：

function SmoothScrollTo(id_or_Name, timelength){ 
    var timelength = timelength || 1000; 
    $('html, body').animate({ 
     scrollTop: $("#"+id_or_Name).offset().top-70 
    }, timelength, function(){ 
     window.location.hash = id_or_Name; 
    }); 
}

來源

2017-12-02 19:03:44

jQuery .scrollTop（）; +動畫

回答

簡單的解決方案：

相關問題