如何使用jQuery在頁面上上下滾動？

我添加了一個鏈接到我的網頁向下滾動：如何使用jQuery在頁面上上下滾動？

<div class="scroll"> 
    <a onclick="scroll_down()" href="#" id="'scroll_id"> 
     click me 
    </a> 
</div> 

<script> 
    function scroll_down() { 
     var y = $(window).scrollTop(); //current position 
     $("html, body").animate({scrollTop: y + $(window).height()}, 600); 
    } 

    function scroll_top() { 
     window.scrollTo(0, 0); 
    } 
</script>

我想設置onclick屬性時達到scroll_top底部。

向下滾動正在工作，但當達到底部時，的<a>標記的屬性不會更改。

<script> 
    window.onscroll = function (ev) { 
     if ((window.innerHeight + window.scrollY) >= $(document).height()) { 
      console.log('bootom') 
      $('#scroll_id').attr('onClick', ''); 
      $('#scroll_id').attr('onClick', 'scroll_top()'); 
     } 
    } 
</script>

做一些身體告訴我錯誤在哪裏？爲什麼它不起作用？

來源

2017-10-09 pietà

你''ID有一個錯誤的'''在它的開頭：'ID = 「'scroll_id」' - 我懷疑你的jQuery選擇'$（'＃scroll_id '）'沒有找到任何東西。 – Santi

在你的jQuery代碼中使用'onclick'而不是'onClick'。 –

使用on*事件屬性被認爲是不好的做法 - 並且在運行時修改它們會更糟糕。

一種更好的解決方案是使用一個單一的不顯眼的事件處理程序，它確定所述頁的當前的滾動位置，並根據需要向上/向下移動，這樣的：

$(function() { 
 
    $('#scroll_id').click(function(e) { 
 
    e.preventDefault(); 
 
    var $win = $(window); 
 
    var scrollTarget = $win.height() + $win.scrollTop() >= $(document).height() ? 0 : $win.scrollTop() + $win.height() 
 
    $("html, body").animate({ 
 
     scrollTop: scrollTarget 
 
    }, 600); 
 
    }); 
 
});

.scroll { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
} 
 

 
#content { 
 
    height: 1000px; 
 
    position: relative; 
 
} 
 

 
#content div { 
 
    position: absolute; 
 
} 
 

 
#content .top { 
 
    top: 20px; 
 
} 
 

 
#content .middle { 
 
    top: 500px; 
 
} 
 

 
#content .bottom { 
 
    bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scroll"> 
 
    <a href="#" id="scroll_id">click me</a> 
 
</div> 
 
<div id="content"> 
 
    <div class="top">top</div> 
 
    <div class="middle">middle</div> 
 
    <div class="bottom">bottom</div> 
 
</div>

來源

2017-10-09 13:55:34

非常感謝您的回答..這太棒了。但有一點，當再次點擊'click me'時，'top'會再次顯示（閃爍）。如何消除這種行爲？ –

我的錯誤 - 我錯過了對'preventDefault（）'的調用來停止鏈接到'＃'的效果。我爲你更新了答案 –

語法錯誤：

<a onclick="scroll_down()" href="#" id="'scroll_id">

應該

 id="scroll_id">

（除去多餘的 '）

來源

2017-10-09 14:01:03

感謝您的回答！一個註釋，僅僅指出拼寫錯誤的答案應該作爲評論與閉幕投票。印刷錯誤被認爲是「Off Topic」，並且非常不鼓勵回答關鍵問題。 – Santi

如何使用jQuery在頁面上上下滾動？

回答

相關問題