jquery animate scroll не работает

Question

Я хочу сделать эффект прокрутки с помощью кнопки в свой контент. Может быть, кто-нибудь может исправить мой код и объяснить, почему он не работает? Спасибо !

Это мой HTML:

<div class="main"> 
<section class="section home"> 
    <header> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
       <h1>Home</h1> 
      </div> 
      <a href="#home-content" class="scroll">BUTTON</a> 
     </div> 
    </header> 
    <div class="content" id="home-content"> 
     <p> 
      My content 
     </p> 
    </div> 
</section> 
</div> 

Мой расслоение плотной файл: `

function scrollDown() { 
     $('a[href="scroll"]').click(function(event) { 
      event.preventDefault(); 
      var targetOffset = $('a[class="content"]').offset().top; 
      $('.main').animate({ 
       scrollTop: targetOffset 
      },1000); 

     }); 
    } 

`

Answer 1

Вот демо, которое показывает, как вы можете вызвать ваша кнопка для прокрутки окна вплоть до вашего содержимого при нажатии. Он добавляет верхний край вашего контента, чтобы подтолкнуть его под дном окна просмотра, чтобы он мог продемонстрировать действие прокрутки.

Чтобы заставить его работать, мне нужно было удалить функцию scrollDown, изменить некоторые из ваших селекторов jQuery и анимировать scrollTop на html, body.

Демо:

$('a.scroll').click(function(event) { 
 
    event.preventDefault(); 
 
    var targetOffset = $('div.content').offset().top; 
 
    $("html, body").animate({ 
 
     scrollTop: targetOffset + "px" 
 
    },1000); 
 
});

.content { 
 
    margin-top: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<section class="section home"> 
 
    <header> 
 
     <div class="row"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12"> 
 
       <h1>Home</h1> 
 
      </div> 
 
      <a href="#home-content" class="scroll">BUTTON</a> 
 
     </div> 
 
    </header> 
 
    <div class="content" id="home-content"> 
 
     <p> 
 
      My content 
 
     </p> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquam sapien, nec accumsan odio. Nunc ac purus accumsan augue sodales malesuada ut at ipsum. Curabitur volutpat et risus ut ultrices. Fusce ante sapien, laoreet non scelerisque nec, elementum et nisl. Curabitur pharetra a sapien ac convallis. Aliquam dapibus viverra sem a lacinia. Proin tempor orci nec massa feugiat, ac tristique tellus convallis. 
 
     </p> 
 
    </div> 
 
</section> 
 
</div>

JSFiddle Версия: https://jsfiddle.net/vhaye0c0/1/