Как сделать плавный скролл якоря?

261
03 января 2019, 01:30

Перепробовал миллион способов, ничего не помогает. Нужно сделать плавный скролл от button до div. Вот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#block-1"> 
  <p class="header-nav nav-1">home</p> 
</a> 
<a href="#block-2"> 
  <p class="header-nav">about</p> 
</a> 
<a href="#block-3"> 
  <p class="header-nav">work</p> 
</a> 
<div id="block-1" class="block-2"> 
  <div id="block-2" class="block-2"> 
    <div id="block-3" class="block-3">

Answer 1

$(document).ready(function(){ 
	$(document).on("click","a", function (e) { 
		e.preventDefault(); 
 
		var id  = $(this).attr('href'), 
 
		top = $(id).offset().top; 
		 
		$('body,html').animate({scrollTop: top}, 200); 
	}); 
});
.block { 
  height:400px; 
} 
.block_blue { 
  background-color: blue; 
} 
.block_red { 
  background-color: red; 
} 
.block_pink { 
  background-color: pink; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#block-1"> 
  <p class="header-nav nav-1">home</p> 
</a> 
<a href="#block-2"> 
  <p class="header-nav">about</p> 
</a> 
<a href="#block-3"> 
  <p class="header-nav">work</p> 
</a> 
<div id="block-1" class="block block_blue"></div> 
<div id="block-2" class="block block_red"></div> 
<div id="block-3" class="block block_pink"></div>

READ ALSO
Как отключить режим чтения для сайта

Как отключить режим чтения для сайта

Как отключить режим чтения на сайте и возможно ли такое? На моем сайте не совсем корректно отображается режим чтенияКак отключить для пользователей...

184
Как внедрить в название чекбокса ссылку?

Как внедрить в название чекбокса ссылку?

Есть чекбокс, сбоку от него, как положено - строчка текстаНо часть этой строчки - ссылка

170
При hover меняется высота блока. Как сделать, что-бы он не &ldquo;отталкивал&rdquo; нижние блоки?

При hover меняется высота блока. Как сделать, что-бы он не “отталкивал” нижние блоки?

Никак не могу подобрать правильное решениеЕсть карточки с товарами, идут рядами на флексах

205