使用js滾動到頂部

我正試圖在我的網站上實現一個簡單的「滾動到頂部」按鈕。使用js滾動到頂部

HTML：

<a href="#" id="scrolltotop"><img src="img/scrolltotop.png"></a>

CSS：

#scrolltotop { 
width: 40px; 
height: 40px; 
position: fixed; 
right: 100px; 
bottom: 50px; 
display: block;  
}

JS：

jQuery(document).ready(function($){ 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 150) { 
     $('#scrolltotop').fadeIn('slow'); 
    } else { 
     $('#scrolltotop').fadeOut('slow'); 
    } 
}); 
$('#scrolltotop').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 500); 
    return false; 
}); 
});

當我打開我的網頁，我看到在正確的地方有按鈕的一瞬間，那麼它會覆蓋我的HTML結構中頁面下的一個div的背景。最後，我看不到它在我的頁面上的任何地方，當我檢查它在正確的位置的元素，只是不可見。

來源

2013-07-25 MBTDesigns

你可以顯示一些代碼，你說的具體'div'是在哪裏，併爲該'div'的CSS？它可能確實像一個答案是'z-索引'，但它可能是別的。你確定你沒有向下滾動，並且'＃scrolltotop'被淡出？ – putvande

我想你只需要一個初始display:none;添加到#scrolltotop像這樣：

#scrolltotop { 
    width: 40px; 
    height: 40px; 
    position: fixed; 
    right: 100px; 
    bottom: 50px; 
    display:none; 
}

Working Example

當使用fadeIn()你需要有該元素的初始顯示狀態設置，讓你我不想嘗試fadeIn()已經存在的元素。

來源

2013-07-25 18:12:50 apaul

謝謝一堆...如果它沒有設置爲顯示：無;它是可見的，直到你向下滾動到底部和備份..然後淡出接管... – MBTDesigns

將z-index: 1000添加到返回頁首鏈接，以便顯示在所有內容之上。

來源

2013-07-25 17:52:50 verbanicm

是的，z-index把它放在一切之上...謝謝！ – MBTDesigns

使用js滾動到頂部

回答

相關問題