jqueryプロダクションクリックは「トップに戻る」ボタンができます

前回の記事では、ボタンをクリックして新機能の上部に戻ります

• ボタンはページの下部に表示されなくなります。ボタンはページの下部から左または右に一定の距離で固定されます
  .ClickTop{ display: none; color:white; padding: 5px 8px; border-radius: 10px; background: purple; position:fixed; left: 20px; bottom: 50px; z-index:3; cursor: pointer; }
  。2 。表示領域の最初の画面ではボタンはありません。ページの場合一定距離上にスクロールすると、ボタンが表示されます。

  • ページのスクロール開始後にイベントを追加する

    window.onscroll = scroll;
    
    function scroll(){
            
            }
    

  • スクロール距離>ウィンドウの表示領域の1/2

    var ScrollLength = $(document).scrollTop(); //获取滚动距离
    

    var ViewHeight = $(window).height(); //获取可视区域的高度
    

3.最終的なjsをまとめます

var Btn = $('.ClickTop');
Btn.click(function(){
    
    
  $('html,body').animate({
    
     scrollTop: 0 }, 500);         
})
window.onscroll = scroll;
function scroll(){
    
    
  var ScrollLength = $(document).scrollTop();
  var ViewHeight = $(window).height();
  //这样获取的是窗口可视区域的大小，如果改成body获取的是body的高度
  console.log('页面开始滚动');
  console.log(ViewHeight);
  console.log(ScrollLength);
// 判断滚动距离 超过0.5倍可视区域的高度
  if (ScrollLength > ViewHeight/2) {
    
    
    Btn.show();
  } else {
    
    
    Btn.hide();
  }
}

https://codepen.io/littlelittlepig/pen/xBgoYNその他のコードについて
は、デモの簡潔なバージョンに移動し、クリックしてトップエフェクトに戻ってください。コメントと修正へようこそ