scrollTo不滾動窗口

我不知道這是爲什麼不工作scrollTo不滾動窗口

HTML

<a href="#" id="scrollTop" class="margin-top-40 btn btn-danger btn-lg top btn-not-100">Back to top</a>

jQuery的

$("#scrollTop").on("click",function(e){ 
     e.preventDefault(); 
     $(window).animate({scrollTop: 0}, 'slow'); 
    });

即使試圖用還是陰性結果如下

$("#scrollTop").on("click",function(e){ 
     e.preventDefault(); 
     $("body, html").animate({scrollTop: 0}, 'slow'); 
    });

Css

html, body {height:100%;}

使用jQuery-1.10.2.js，consolle不給任何錯誤

UPDATE 下面的評論使我理解這個問題是使用jQuery scrollTop的和HTML，身上設置溢出。 ..因爲那a new question has been created here on stack。

來源

2014-01-14 rob.m

您確認JavaScript正在加載後的HTML標記？ –

@dontvotemedown - 它是有效的（也許不是css）。這應該工作。我使用$（'html，body'）。animate（{scrollTop：$（'＃elem'）。offset（）。top +'px'}，500）;定期 –

@FelipeMiosso是的，所有其他js工作正常 –

得到了問題，這要歸功於評論我發現我有body: overflow-x:hidden這意味着，當我們正在使用的身體溢出scrollTop的不工作，HTML

來源

2014-01-15 08:36:41

這行代碼爲我工作在我的網站：

$("body, html").animate({scrollTop: 0}, 'slow');

所以它必須調用代碼。也許你有重複的ID。在控制檯中鍵入：

alert($('*#scrollTop').size());

或者你可以使用多個選擇：

function myScrollTop(e) 
{ 
    e.preventDefault(); 
    $("body, html").animate({scrollTop: 0}, 'slow'); 
} 

// Map to future elements 
$('body').on('click', '#scrollTop', myScrollTop); 

// Get all elements with id if there are multiple 
$('*#scrollTop').click(myScrollTop);

來源

2014-01-14 19:24:34 redolent

代替'href =「＃」'如果我確實提醒（$（'*＃scrollTop'）。size（））它會給我0 –

然後你的「Back to頂部「鏈接不能在頁面上？ 'alert（$（'＃scrollTop'）。size（））'（不含星號）怎麼辦？ – redolent

仍然0作爲一個提醒 –

好了，你的第一個代碼段將無法正常工作，因爲window沒有一個scrollTop財產那body有（這就解釋了爲什麼你的第二個代碼段應該工作正常 - 你可以做console.log($(window))並檢查它的屬性只是爲了確保）。

但是，你可以做$(window).animate(..)，你將不會看到任何錯誤在瀏覽器控制檯因爲對象支持它。問題是，當試圖指定scrollTop參數到動畫這是不是受影響元素支持，預期將無法正常工作（剛剛從你的第二個代碼片段發表意見e.preventDefault()線，看看是什麼發生 - 它正在停止腳本執行測試時，我真的不知道你爲什麼使用該行）。順便說一句，我也不知道你爲什麼說你的第二個代碼片段不起作用（也許這取決於你使用的瀏覽器，至少它使用Chrome）。所以，據我記得，在jQuery選擇只使用body或html標籤（S）時scrollTop，但你可以試試這個$('body,html,document')更好兼容性然後附加中存在一些問題動畫功能。我會建議你做一些關於的研究如何滾動頂部交叉瀏覽器。

另一項建議（如果你的第二個代碼片段劇照不工作對你罰款）可以檢查你的DOM已經加載，也許你可以嘗試使用您的代碼在onDomReady這意味着把它在$(function(){ .. });或$(document).ready(..)之內。

現場演示：http://jsfiddle.net/oscarj24/n7Buw/2/

來源

2014-01-14 19:29:28

掛，我有身高100％，這是什麼造成它不滾動！ –

如果你測試你的第一個代碼片段，你會看到動畫執行奇怪的*（只是評論'e.preventDefault（）'行）*。我已經在另一個'jsfiddle'（它沒有* 100％*'height'）測試過，並且仍然奇怪。看看並測試這個http://jsfiddle.net/oscarj24/n7Buw/3/ *（包含你的第一個代碼片段）*對這個http://jsfiddle.net/oscarj24/n7Buw/2/ *（使用你的第二個代碼片段）*並查看其差異。 –

然而，我們確實有一個100％的身體問題，它完全使得無效，因爲無論性能問題，它都不會滾動 –

scrollTo不滾動窗口

回答

相關問題