Плавная прокрутка страницы

Плавная прокрутка страницы

Рубрика « Анимация » | Нет комментариев

Чтобы при нажатии на ссылку или пункт меню страница плавно прокрутилась до нужного места вниз или вверх ставим якоря и скрипт:

Приведу пример на меню.
Разметка у нас, к примеру, такая:

<ul>
 <li><a href="#">Фото</a></li>
 <li><a href="#">Видео</a></li>
 <li><a href="#">Отзывы</a></li>
 <li><a href="#">Контакты</a></li>
 </ul>

Расставляем ссылки-якоря у каждого пункта с разными id:

<ul>
 <li><a href="#top1">Наверх</a></li>
 <li><a href="#top2">Фото</a></li>
 <li><a href="#top3">Видео</a></li> 
 <li><a href="#top4">Контакты</a></li>
 </ul>

Теперь проставим в нужных частях на странице конечную точку для прокрутки:

<div id="top1" class="foto"></div>
<div id="top2" class="video"></div>
<div id="top3" class="otzivy"></div>
<div id="top4" class="kontakty"></div>
Названия top1, top2… можно заменить на любые, но они обязательно должны соответствовать своим конечным точкам: id=‘‘foto’’ — href=‘‘#foto’’, id=‘‘kontakty’’ — href=‘‘#kontakty’’…

Сейчас мы сделали прокрутку к нужному месту на странице, но пока она работает  «скачком», для плавности скролла ставим джава скрипт перед закрывающим тегом body:

<script type="text/javascript">	
	$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
</script>

Конечно библиотека JQ должна быть подключена:

<script type="text/javascript" src="js/jquery-1.9.1.min.js">
</script>

или:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif