回頁首按鈕不點擊 - jquery

我想通過簡單的jquery實現頁面上的「回到頂部」功能。「BACK TO TOP」按鈕按預期顯示/消失。當它出現時，如果我點擊它，我希望它會進入頁面的頂部，而不會發生任何事情。我不確定發生了什麼問題。回頁首按鈕不點擊 - jquery

下面的代碼：

CSS：

#btoTop { 
     padding: 15px 10px; 
     background: #1f242a; 
     color: #fff; 
     position: fixed; 
     bottom: 0; 
     right: 15px; 
     display: none; 
     cursor:pointer; 
     cursor:hand; 
     width:130px; 
     height:40px; 
    }

HTML：

<div id='btoTop'>BACK TO TOP</div>

JS：

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      if($(window).scrollTop() > 0){ 
       $("#btoTop").fadeIn("slow"); 
      } 
      else { 
       $("#btoTop").fadeOut("slow"); 
      } 
     }); 
     $("#btoTop").click(function(event){ 
      event.preventDefault(); 
      $("html, body").animate({scrollTop:0 },"slow"); 
     }); 
});

注意：如果我呼的一下函數內$（window）.scroll（），我可以點擊按鈕。但它閃爍並且不適合窗口大小調整。

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      if($(window).scrollTop() > 0){ 
       $("#btoTop").fadeIn("slow"); 
      } 
      else { 
       $("#btoTop").fadeOut("slow"); 
      } 
      $("#btoTop").click(function(event){ 
       event.preventDefault(); 
       $("html, body").animate({scrollTop:0 },"slow"); 
      }); 
     }); 

});

來源

2015-05-27 Mustang

作品[這裏]（http://jsfiddle.net/042x8sxh/） – Zee

必須是別的東西，我得到它的工作（https：//開頭jsfiddle.net/rp1gzeut/） – stackoverfloweth

你的代碼在這裏工作：https://jsfiddle.net/y8yqs7oz/ –

我想知道當我嘗試點擊它時，該按鈕在DOM中尚不可用。在它上面添加一個定時器非常好。希望這有助於有人在那裏有類似的問題...

$(document).ready(function(){ 
      $(window).scroll(function(){ 
       if($(window).scrollTop() > 0){ 
        $("#btoTop").fadeIn("slow"); 
       } 
       else { 
        $("#btoTop").fadeOut("slow"); 
       } 
      }); 
      $timeout(function() { 
       $("#btoTop").click(function(event){ 
        event.preventDefault(); 
        $("html, body").animate({scrollTop:0 },"slow"); 
       }); 
      }, 500); 
});

來源

2015-05-27 19:08:06 Mustang

你對你的按鈕綁定click滾動每一次，這是不必要的。你應該改變它：

$(document).ready(function() { 

    $(window).scroll(function() { 

    if($(window).scrollTop() > 0) { 

     $("#btoTop").fadeIn("slow"); 

    } else { 

     $("#btoTop").fadeOut("slow"); 
    } 
    }); 

    // Bound a single time 
    $("#btoTop").click(function (event) { 

    event.preventDefault(); 
    console.log("Clicked the button"); 
    $("html, body").animate({scrollTop:0 },"slow"); 

    }); 
});

這可能不是問題，但應該改變，以避免代碼中的奇怪行爲。

來源

2015-05-27 17:12:19 Alex

我知道它。由於按鈕的單一綁定不起作用，我試圖讓滾動內的點擊功能。我按照你提到的方式，點擊沒有被調用，這正是我的問題 – Mustang

@SAM你沒有看到*「點擊按鈕」*在開發工具，當你點擊它？如果沒有，那麼在別處有一個問題 – Alex

是的！我沒有看到警報提示，如果我在它上面放置了一個斷點，調試器甚至沒有到達它。 – Mustang

回頁首按鈕不點擊 - jquery

回答

相關問題