ScrollTop按钮和滚动与JQuery

我有一个网站有两个滚动选项。当你向下滚动时，它滚动到锚点1.ScrollTop按钮和滚动与JQuery

我也有一个按钮，它跳转到同一个锚点。

我的问题：当我点击按钮时，站点跳转到锚，但因为有两种方式锚，它也会触发第一个滚动选项。

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; 
     }     
    });  
});

任何解决方案？

来源

2017-08-28 Cembo

我能看到的第一件事情，你不需要2'$（窗口）.scroll（函数（）{}）'因为当你将滚动，无论是功能将在同一时间被调用..你可以用同样的方法做同样的事情。 – Arthur

您需要从第二个滚动函数的“if”部分放置代码，并使其成为第一个滚动函数的“else”部分 – Dumisani

你发送的截屏，该代码应滚动横幅的底部单击按钮时（前提是您正确放置锚格）：

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; 

      }); 
     }); 

    });

来源

2017-08-28 11:32:25 RickL

这里是一个示例：https://www.screencast.com/t/dufr6Nam – Cembo

OK谢谢 - 已更新的答案 – RickL

现在的问题是，mousescroll不会跳到锚点。 – Cembo

ScrollTop按钮和滚动与JQuery

回答

相关问题