2017-12-20 26 views
0

私はプレゼンテーションウェブサイトを作成しており、スクロールを開始するときにアクティブになる何らかのトランジションスクリプトを書く必要があります。私はそれらの間に大きなギャップを持つ少数のディビジョンを持っています...スムーズに別のdivに直接移動する(遷移)

.div { 
    padding: 20% 0% 20% 0%; 
} 

これはdiv間の本当に大きなギャップを作ります。今、私はいくつかの円滑な<div class="projects"> </div>"

<div class="bio"> </div>から何を移動するJS書きたいこれは私のHTML

  <div class="col s12 m6"> 
       <div class="section"> 
        <div id="bio" class="bio center col s12"> 
         <h2> About us </h2> 
         <hr class="section-title" /> 
         <p> 
          Text 
         </p> 
        </div> 
       </div> 
      </div> 
      <div class="col s16 m6"> 
       <div class="section"> 
        <div id="projects" class="projects center"> 
        <h2> Our projects </h2> 
        <hr class="section-title" /> 
        <div class="project"> 
         <h3> Title of project </h3> 
         <p> 
          Some text 
         </p> 
        </div> 
        <h3> Planning to do </h3> 
         <span class="nothing"> Another text </span> 
        </div> 
       </div> 
      </div> 
      <div class="col s16 m6"> 
       <div class="section"> 
        <div id="contact" class="footer center"> 
         <h2> Contact us </h2> 
         <hr class="section-title" /> 
         <p> Some contacts </p> 
        </div> 
       </div> 
      </div> 

あなたはどのようにdiv要素の間の単純なトランジションを作るために任意のヒントを持っていますかの構造?

+0

*これはdivの間、本当に大きなギャップを作る*実際に、それはありません。パディングは要素間にスペースを作成せず、マージンは行いません。 –

+0

これまで見たことはありますか? –

+0

divにスライドするアン​​カータグを使用しますか? –

答えて

1

domオブジェクトの関数scrollIntoViewを使用できます。私はあなたがこれを行うことができますどのように例示フィドルを作成しました:https://jsfiddle.net/dhiogoboza/fqb2sqt7/3/

function scrollToElement(selector) { 
    var el = document.querySelector(selector);  
    el.scrollIntoView({'behavior': 'smooth', 'block': 'start'}); 
} 
+0

うわー、それはかなりクールです!フリースクロ​​ールで使用できますか?私はセレクタボタンを使用せずにページ上の私の実際の位置を使用することを意味します。これは1ページのnavbarのために本当に素晴らしいです!こんにちは、これを愛してください –

+0

こんにちは、自由スクロールのために、特定の位置にスクロールする別の機能を使用する必要があります。 –

+0

どちらですか?これは本当にうまくいく。 –

関連する問題