Вход

Плавный скролл до элемента на jQuery

Плавный скролл до элемента на jQuery

Не редко на сайтах встречается меню, пункты которого «прокручивают» страницу до определённых элементов. В данной статье мы рассмотрим как реализовать плавный скролл используя jQuery.

Начнём со структуры HTML страницы. Атрибуты ссылок href имеют якоря #id которые соответствую блокам до которых необходимо прокручивать страницу.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Плавный scroll jQuery</title>
	<!--Подключаем jQuery-->
	<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
	<style>
		.nav ul{
			overflow: hidden;
		}
		.nav li{
			list-style: none;
			float: left;
		}
		#block1{
			width:100%;
			height:500px;
			background-color: #f00;
		}
		#block2{
			width:100%;
			height:500px;
			background-color: #0f0;
		}
		#block3{
			width:100%;
			height:500px;
			background-color: #00f;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li><a href="#block1">block1</a></li>
			<li><a href="#block2">block2</a></li>
			<li><a href="#block3">block3</a></li>
		</ul>
	</div>
	<div id="block1">block1</div>
	<div id="block2">block2</div>
	<div id="block3">block3</div>
</body>
</html>

Теперь мы видим, что скролл успешно работает, остаётся лишь добавить js скрипты, задающие плавность данному эффекту.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	jQuery(document).ready(function(){
	    jQuery('.nav a[href^="#"]').click( function(){
	        var scroll_el = jQuery(this).attr('href');
	        var destination = jQuery(scroll_el).offset().top;
	        if (jQuery(scroll_el).length != 0) {
	            jQuery('html, body').animate( { scrollTop: destination }, 1100 );
	        }
	        return false;
	    });
	})
</script>

demo
down

2 февраля 2018 /

2225 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

Please Login to comment
  Получать уведомления о новых комментариях  
Уведомлять