Плавная прокрутка до якоря в html
0
12.08.201819:2912.08.2018 19:29:19
В этой статья я расскажу как использовать html якоря и сделаем плавную прокрутку с использованием javascript
Для начала создадим html страницу разместим ссылку с якорем и сам якорь ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anchor</title>
</head>
<body>
<a href="#anchor">Ссылка на якорь</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="#anchor">Якорь</div>
</body>
</html>
|
Скрипт плавной прокрутки до якоря на js, в поле href*="#anchor" подставляем название нашего якоря.
<script>
$("body").on('click', '[href*="#anchor"]', function(e){
var fixed_offset = 100;
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
e.preventDefault();
});
</script>
|
Скачать пример страницы с якорем:
12.08.201819:2912.08.2018 19:29:19