ScrollTop按鈕和滾動與JQuery

Question

我有一個網站有兩個滾動選項。當你向下滾動時，它滾動到錨點1.

我也有一個按鈕，它跳轉到同一個錨點。

我的問題：當我點擊按鈕時，站點跳轉到錨，但因爲有兩種方式錨，它也會觸發第一個滾動選項。

jQuery(document).ready(function($) { 
    var flag = true; 

    $(window).scroll(function() { 
     if (flag == true) {     
      scroll = $(window).scrollTop(); 
      if (scroll > 50) $('#scroll-down')[0].click(); 
      flag = false; 
     }     
    }); 

    $(window).scroll(function() { 
     if (flag == false) {     
      scroll = $(window).scrollTop(); 
      if (scroll < 50) 
      flag = true; 
     }     
    });  
}); 

任何解決方案？

Answer 1

你發送的截屏，該代碼應滾動橫幅的底部單擊按鈕時（前提是您正確放置錨格）：

jQuery(document).ready(function ($) { 

     // The button is assumed to have an id of 'scroll-down' - triggered when clicked 
     $('#scroll-down').on('click', function() { 

      // Move to the pre-defined anchor point 
      // Insert <div id="scroll-down-anchor"></div> to where you want to scroll to 
      $('html, body').animate({ 

       scrollTop: $('[id=scroll-down-anchor]').position().top 

       // Set the speed of the scroll here (currently set to 1000 ms) 
      }, 1000); 

     }); 

    }); 

我仍然不知道從在窗口滾動時根據窗口位置屏幕播放您想要處理的行爲。

更新：根據截屏視頻和進一步的信息。 代碼已被更新，但是，儘管這是，我想，你的代碼試圖達到什麼效果，我認爲效果不是很好，因爲你攔截了用戶的意圖，劫持它，發生不同的事情。它也非常不穩定，爲了改善這一點，可能需要更多的代碼行（例如，確定現有滾動的速度，攔截並加速其有機加速 - 超出了這種答案的範圍）。也許有一個插件可以很好地做到這一點。

無論如何，我認爲這段代碼完成了你試圖實現的目標，但最終效果雖然是主觀的，但在我看來並不是很好。我已經把在解釋性意見：

 jQuery(document).ready(function ($) { 

     // Variable to store scrolling state 
     var scrolling = false; 
     // Variable to store position to determine whether scrolling up or scrolling down 
     var previousScroll = 0; 

     $(window).scroll(function() { 
      // Only is state is not 'scrolling' (ie not to run if button has been clicked) 
      if (scrolling === false) { 
       // Get position 
       var currentScroll = $(this).scrollTop(); 
       // Compare position to stored variable: scrolling up or scrolling down 
       if (currentScroll > previousScroll) { 
        // Determine if position is 'within the zone' - set here to 50px 
        if (currentScroll < 50 && currentScroll !== 0) { 
         console.log('IN ZONE'); 
         // Trigger button click 
         $('#scroll-down').trigger('click'); 
        } else { 
         // Normal scrolling down code, outside zone 
         console.log('SCROLLING DOWN '); 
        } 
       } 
       else { 
        // Scrolling up code 
        console.log('SCROLLING UP '); 
       } 
       // Set variable for comparison of next scroll event 
       previousScroll = currentScroll; 
      } 

     }); 

     // The button is assumed to have an id of 'scroll-down' - triggered when clicked 
     $('#scroll-down').on('click', function() { 
      // Set the scrolling state 
      scrolling = true; 
      // Animate with callback to set scrolling back to 'true' when complete 
      $('html, body').animate({ scrollTop: $('[id=scroll-down-anchor]').position().top }, 1000, function() { 
       // Callback code - set scrolling state to be false when animation has finished 
       scrolling = false; 

      }); 
     }); 

    });