JQueryでボタン＆スクロールしたスクロールトップ

Question

私は2つのスクロールオプションを持つウェブサイトを持っています。下にスクロールすると、アンカーポイント1にスクロールします。

同じアンカーポイントにジャンプするボタンもあります。

問題：ボタンをクリックすると、サイトがアンカーにジャンプしますが、アンカーには2つの方法があるため、最初のスクロールオプションもトリガーされます。

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

ボタンがクリックされたときに、このコードは（あなたが正しくアンカーのdivを置く提供）バナーの一番下までスクロールする必要があります

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; 

      }); 
     }); 

    });