Главная » Эффекты для сайта » Как сделать плавную прокрутку к якорю на JQuery. Способ№1

Как сделать плавную прокрутку к якорю на JQuery. Способ№1

2015-10-02 / Вр:23:36 / просмотров: 3164

Все, кто планирует создать одностраничник (лейдинг), обязательно столкнутся с необходимостью сделать плавную прокрутку к якорю. Как это работает? При нажатии из разделов меню, вас плавно передвинут вниз к выбранному разделу.
Чтобы лучше понять, что я тут рассказываю, посмотрите на демонстрацию.

[смотреть демонстрацию]

Такая плавная прокрутка делается с помощью библиотеки JQuery.
Идем поэтапно.
Создаем ссылки:

<a href="#o_nas">О нас</a>
<a href="#kontakt">Контакты</a>

Теперь закидываем якорь в нужный раздел.

<div id="o_nas"></div>
<h2> О нас </h2>
текст
<div id="kontakt"></div>
<h2> О нас </h2>
текст

Далее подключаем библиотеку JQuery. Как подключить библиотеку JQuery, читайте тут.

<script ENGINE="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js "></script>

Теперь перед тегом вставьте код JavaScript:

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

Строка №6 – тут можно отрегулировать плавную прокрутку. То есть, за сколько секунд после нажатия по ссылке, прокрутится страница до якоря. Задаётся в миллисекундах.

2000 миллисекунд = 2 секунды.

Вот такой готовый код у меня вышел:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BlogGood.ru</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js "></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(){
var el = $(this).attr('href');
$('body').animate({
scrollTop: $(el).offset().top}, 2000);
return false;
});
});
</script>
</head>
<body>
<pre>
<h2>Перевод песен.</h2>
<a href="#stih1">Перевод песни группы Type o negative</a>
<a href="#stih2">Перевод песни группы HIM</a>
<a href="#stih3">Перевод песни группы Nazareth</a>
<div id="stih1"></div>
<h3>Перевод песни группы Type o negative</h3>
Анестезия (перевод Ольга)
Подобно вспышке света в бесконечной ночи,
Жизнь попала в ловушку межу двух темных исполинов,
Потому что когда ты доверяешь кому-то,
Рождается иллюзия
И нет возможности подготовить себя
К неминуемому отчаянию.
Лучше любить и потерять.
Но неведение – это блаженство,
Я хотел бы не знать твоего поцелуя.
Столько времени сгорело,
А урок, по-прежнему, остается неусвоенным.
Запомни, страсть только подливает масла в огонь!
Лжец!
На пути от рождения к смерти
Сожалею о каждом сделанном вздохе.
Мне жаль живых,
Зависть к мертвым переполняет меня.
Эмоционально ошеломленный,
В оправдание – я застываю в неподвижности.
Я предпочел бы не знать, чем быть в курсе
И бояться.
Мне не нужна любовь.
Разве тысячи слез стоят одной единственной улыбки?
Когда ты протягиваешь дюйм, они не отхватывают милю?
Мечтаешь о прошлом, боясь будущего...
Если не тебя используют, значит, используешь ты, и ты - неудачник.
Известная всему миру неудача в жизни и в смерти,
На фоне "ничто", зловонной атмосферы чистилища...
Бегство и прятки – игра трусов.
Средства исчерпаны, за исключением одного – анестезия,
Анестезия...

Я не чувствую ничего,
Мне не нужно ничего,
Мне не нужна любовь.
<div id="stih2"></div>
<h3>Перевод песни группы HIM</h3>
Кто-то сказал жестокую вещь:
Давай умрём вместе 

Крошка, давай умрём вместе...
Крошка, давай умрём вместе...
Крошка, давай умрём вместе...

Мы так молоды,
Мы только начали жить.
Но мы уже поняли,
Что должны покинуть этот мир.
И мы ждали так долго,
Когда этот момент наступит,
Мы так хотели быть вместе,
Вместе умирая....

Ооo
Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!
Хочешь ли ты умереть?
Крошка, давай умрём вместе!
Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!

Этот мир – жестокое место,
И мы там только потеряемся.
Раньше мы жили в слезах, и теперь нам позволили,
Смерть благословила нас...

Ооо

Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!
Ты умрешь...
Крошка, давай умрём вместе!
Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!
Давай умрём вместе!

Oh
Ооо

В этом мире не стоит жить...
В этом мире не стоит жить...
Давай умрём...
В этом мире не стоит жить...
Давай умрём...
Давай умрём...
В этом мире не стоит жить....

Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!
Ты умрешь...
Крошка, давай умрём вместе!
Хочешь ли ты сегодня умереть ради любви?
Крошка, давай умрём вместе!
Крошка, давай умрём вместе!

<div id="stih3"></div>
<h3>Перевод песни группы Nazareth</h3>
Малая часть тебя
Я не хочу брать тебя в плен
Или делать это против твоей воли
В жизни не взялся бы обманывать тебя
Взял бы только малую часть тебя
Все что хочу - малую часть тебя
Никогда не оставлю тебя в затруднении,
С точки зрения любого
Нельзя и вообразить, чтобы держал тебя в узде
Взял бы только малую часть тебя
Все что хочу - малую часть тебя

Я знаю, что весь мир
Со всеми своими бриллиантами и жемчугами
Никогда не сможет купить тебя
Никогда и пытаться не будет

Никогда не заставлю тебя грустить,
Оставив под дождем
И в голову не приходило, что ты - легкая добыча
Взял бы только малую часть тебя
Все что хочу - малую часть тебя

Я знаю, что весь мир
Со всеми своими бриллиантами и жемчугами
Никогда не сможет купить тебя
Никогда и пытаться не будет
</pre>
</body>
</html>

Как вы уже заметили, якорь создавался с помощью блока «div»: