Страницы

понедельник, 1 декабря 2014 г.

Плавная прокрутка между ссылками внутри страницы (якорями)

Еще одна запись, чтобы не искать это потом в интернете. Скрипт, который делает плавный переход между якорями на странице. Значение 1500 можно поменять на свое - это скорость перемещения от текущего положения к ссылке.

<script type="text/javascript">
$(document).ready(function() {

$('a[href^="#"]').click(function(){
        var el = $(this).attr('href');
        $('body').animate({
            scrollTop: $(el).offset().top}, 1500);
        return false; 
});
    
});
</script>

Ссылка (якорь) внутри страницы делается следующим образом - элемент, к которому нужно передвинуть экран называется с решеткой вначале, например 

#home-anchor
<a href="#home-anchor">

Таким образом - при нажатии на эту ссылку экран переместится к элементу:

<div id="home-anchor">

При наличии скрипта внутри тега <head> переход будет плавный.


Комментариев нет:

Отправить комментарий