在響應式佈局

不包括jQuery腳本我有一個jQuery腳本的「返回頂部」按鈕，如下所列：在響應式佈局

<script type="text/javascript"> 
$(document).ready(function(){ 

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

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

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

}); 
</script>

我有兩個樣式表一個用於臺式機，一個用於移動。當我使用移動樣式表時，我試圖隱藏回頂部按鈕：

#TopButton { 
display: none; 
}

但它仍然出現。反正有沒有亂七八糟的HTML？

在此先感謝。

來源

2012-09-12 Ben

您當前的方法是有，因爲你的JavaScript代碼.fadeIn()將覆蓋display: none;

您需要設置不會被jQuery代碼會影響一個CSS值的麻煩。我假設你的#TopButton絕對定位？如果是，嘗試設置屬性，如

left: -9999px;

這將保持它關閉的頁面，也不會在所有受到影響的時候jQuery的試圖淡化它英寸

希望這可以幫助你出

來源

2012-09-12 17:56:35

馬特..謝謝！這工作完美。 – Ben

很高興聽到它！接受答案，如果你不介意 –

絕對！不得不等待4分鐘！ – Ben

如果你不希望有改變你的HTML和CSS代碼可能看起來像

if ($('#TopButton').css('display')!='none') 
{ 
    // hide #back-top first 
    $("#TopButton").hide(); 

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

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

    });

來源

2012-09-12 18:02:54 Knollbert

在響應式佈局

回答

相關問題