2017-10-11 16 views
1

私はonclickという2つのシンプルなdivを持っており、ウェブサイトの特定の部分に移動するscrollTopを実行します。scrollTop - 2回目のクリックが機能しない

問題は、以下の通りである。

  1. 私は「申し出をする」のdivをクリックしてください。これは正しい場所に私をもたらします。
  2. "installments" divをクリックすると、ページの上部にスクロールします。

必須:常に正しいポイントにスクロールする必要があります。

のdiv:

<div id="button" class="Alan_button_blue">Make an Offer</div> 

<div id="instalments" class="Alan_button_2">Instalments</div> 

は2つのdivのための2つのスクリプトは、次のとおりです。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#button").click(function(){ 
      var offset = 1; //Offset of 1px 
      $('body, html').animate({ 
       scrollTop: $("#section5").offset().top + offset 
      }, 1500); 
     }); 
    });  

    $(document).ready(function(){ 
     $("#instalments").click(function(){ 
      var offset = 1; //Offset of 1px 
      $('body, html').animate({ 
       scrollTop: $("#section6").offset().top + offset 
      }, 1500); 
     }); 
    });  
</script> 

誰が助けることができれば、それは素晴らしいことです!

+0

を言うことができませんか?それはトップの近くですか? –

+0

こんにちはMohit - #section6はhtmlの#sectionより下です。私はDivsをボタンに変えることを考えていました...多分それはそうするでしょう... – AlanDodd

答えて

1

私はあなたのコードをテストし、それは完全に動作します。私は...いただきました!問題

あなた `#section6` divのページ上に配置されている

 $(document).ready(function(){ 
 
      $("#button").click(function(){ 
 
       var offset = 1; //Offset of 1px 
 
       $('body, html').animate({ 
 
        scrollTop: $("#section5").offset().top + offset 
 
       }, 1500); 
 
      }); 
 
     });  
 

 
     $(document).ready(function(){ 
 
      $("#instalments").click(function(){ 
 
       var offset = 1; //Offset of 1px 
 
       $('body, html').animate({ 
 
        scrollTop: $("#section6").offset().top + offset 
 
       }, 1500); 
 
       }); 
 
      }); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
     <div id="button" class="Alan_button_blue" style="padding:50px;background:lightgray;margin-bottom:50vh;">Make an Offer</div> 
 

 
     <div id="section5" style="width:100%;height:50vh;background:#aaafff"></div> 
 
     
 
     <div id="instalments" class="Alan_button_2" style="padding:50px;background:darkblue;color:white;margin-bottom:50vh;">Instalments</div> 
 
     
 
     <div id="section6" style="width:100%;height:50vh;background:#333333"></div> 
 
     
 
     <div style="height:75vh;"></div>

関連する問題