滾動到部分

Question

我有以下代碼，我的問題是我將如何去添加到此，以便當用戶單擊鏈接時添加滾動以便它將它們帶到類.instructors部分

<?php if($hasSections): ?> 

        <div class="instructors-links"> 
         <?php foreach ($sections as $section): ?> 
          <a href="#section<?php echo $section['id']; ?>"> 
           <div class="instructors-img"> 
            <img src="<?php echo $section['image']['url']; ?>" /> 
            <h2><?php echo $section['title']; ?></h2> 
           </div> 
          </a> 

         <?php endforeach; ?> 
        </div> 

        <div class="instructors"> 
         <?php foreach ($sections as $section): ?> 

          <section id="section<?php echo $section['id']; ?>"> 
           <h1 class="section-title"><?php echo $section['title']; ?></h1> 
           <div class="section-content"> 
            <?php echo $section['content']; ?> 
           </div> 
          </section> 

         <?php endforeach; ?> 
        </div> 



        <script type="text/javascript"> 
         var $sections = jQuery('.instructors section'), //Each section of content 
          $sectionLinks = jQuery('.instructors-links a'); //Each section link 

         //When a section link <a> tag is clicked 
         $sectionLinks.click(function(e) { 
          e.preventDefault(); //prevent the default actions from happening like following the link and scrolling down to the content 

          changeSection(
           jQuery(this).attr('href').replace('#', '') //Gets the href value of the clicked <a> tag and removes the "#" character 
          ); //Passes the section link to the "changeSection" function 
         }); 

         changeSection('section1'); //When the page loads, display the "section1" section 
         function changeSection(sectionID) { 
          $sections.stop(true).hide(); //Stop animating and hide all sections 
          $sections.filter('#' + sectionID).stop(true).fadeIn(); //Display the section with the same ID as the section link that was clicked 

          $sectionLinks.removeClass('selected'); //Remove the selected class from all section link <a> tags 
          $sectionLinks.filter('[href="#' + sectionID + '"]').addClass('selected'); //Add the "selected" class to the section link that was clicked 
         } 

        </script> 

       <?php endif; ?> 

這個想法是，當用戶點擊一個鏈接時，文本發生變化，頁面向下滾動到文本。

Answer 1

這應該動畫滾動到

function changeSection(sectionID) { 
     $sections.stop(true).hide(); //Stop animating and hide all sections 
     $sections.filter('#' + sectionID).stop(true).fadeIn(); //Display the section with the same ID as the section link that was clicked 

     $sectionLinks.removeClass('selected'); //Remove the selected class from all section link <a> tags 
     $sectionLinks.filter('[href="#' + sectionID + '"]').addClass('selected'); //Add the "selected" class to the section link that was clicked 

     $('html, body').animate({ 
      scrollTop: $sections.offset().top 
     }, 2000); 

    } 

Answer 2

我創建了一個‘助手’功能JS約長卷「.instructors節」

function goToByScroll (id) { 
    // Reove "link" from the ID 
    id = id.replace("link", ""); 
    // Scroll 
    $('html,body').animate({ 
     scrollTop: $("#" + id).offset().top 
    }, 
     'slow'); 
} 

你應該通過id和將工作。

goToByScroll('section1'); 

如果找到窗口此ID