jQuery退回「回到頂部」鏈接。頁面加載鏈接的可見性

我試圖實現一個「回到頂部」的鏈接，在用戶向下滾動頁面一定量時，淡入到我的頁面上。jQuery退回「回到頂部」鏈接。頁面加載鏈接的可見性

我注意到，在我的一些頁面上，「回到頂部」鏈接會在頁面上閃爍，然後纔會隱藏，而不是其他頁面。爲了追蹤「鏈接閃光燈」的原因，我創建了一個JS小提琴讓您查看我的編碼，並希望找到造成不一致的原因。 JS小提琴本身似乎工作正常，但這可能只是因爲它在小提琴中。我可以添加一行代碼來確保鏈接在加載時隱藏嗎？

感謝您抽出時間看一下。非常感謝。

http://jsfiddle.net/uLUWV/

HTML

<div class="container"> 
Test Content 
</div>  
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>

CSS

#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;} 
#back-top a {width: 83px; display: block;} 
#back-top span {width: 83px; height: 94px; display: block; background-color:red;} 

.container {height:4000px;}

jQuery的

$(document).ready(function(){ 

    // hide #back-top first 
    $("#back-top").hide(); 

    // fade in #back-top 
    $(function() { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 500) { 
       $('#back-top').fadeIn(); 
      } else { 
       $('#back-top').fadeOut(); 
      } 
     }); 

     // scroll body to 0px on click 
     $('#back-top a').click(function() { 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      return false; 
     }); 
    }); 

});

來源

2013-06-05 Alex Ritter

似乎罰款FF 21.0 WinXP –

似乎也很好，在Linux上的Chrome 27。 –

OP表示它在小提琴上工作，但不在他的網站，所以當然它工作正常。 @Alex Ritter，你可以發佈你不工作的頁面嗎？ –

發現了你的問題。

你需要把你的CSS #back-top{display : none}。

有一個，但它正在越過您的媒體查詢。您只需要顯示器需要更多的特定選擇器。

在skin.css加入這一行，它應該糾正錯誤：

p#back-top{display : none}

檢查後，您的媒體查詢仍然有效。如果不是，那麼您的查詢也必須更具體。

現在，您的按鈕被隱藏.hide()。所以一旦你可以通過CSS隱藏按鈕，你將能夠刪除這條線。

來源

2013-06-05 17:27:40

對！像魅力一樣工作。謝啦。 –

我測試下面的代碼和它的工作沒有問題

<!doctype html> 
    <html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 

       // hide #back-top first 
       $("#back-top").hide(); 

       // fade in #back-top 
       $(function() { 
        $(window).scroll(function() { 
         if ($(this).scrollTop() > 500) { 
          $('#back-top').fadeIn(); 
         } else { 
          $('#back-top').fadeOut(); 
         } 
        }); 

        // scroll body to 0px on click 
        $('#back-top a').click(function() { 
         $('body,html').animate({ 
          scrollTop: 0 
         }, 800); 
         return false; 
        }); 
       }); 

      }); 
    </script> 
    <style type="text/css"> 
     #back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;} 
    #back-top span {width: 83px; height: 94px; display: block; background-color:red;} 

    .container {height:4000px;} 

#back-top a {width: 83px; display: block;color: white;} 
#back-top a:active { 
color: white; 
} 
    </style> 
    </head> 
    <body> 
    <div class="container"> 
    Test Content 
    </div>  
    <p id="back-top"><a href="#top"><span>Go To Top</span></a></p> 
    </body> 
    </html>

此代碼在您的瀏覽器上運行？

來源

2013-06-05 17:15:47 Leonardo

它在大多數頁面上都能正常工作，這很奇怪。有幾個頁面，鏈接每次閃爍。你可以在http://temp.yandasmusic.com查看這個 –

jQuery退回「回到頂部」鏈接。頁面加載鏈接的可見性

回答

相關問題