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

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

2015-10-05 / Вр:22:39 / просмотров: 3653

В этой статье буду описывать второй способ, как сделать плавную прокрутку к якорю на JQuery. Если вы не читали о первом способе, то рекомендую для сравнения почитать.

Почему два способа? В чем между ними разница? Отвечаю…

В первом способе мы якорь закидывали через «div», а вот во втором закинем стандартным путем – через «name».
Кто не знает, как закидывать якорь на HTML странице, читайте вот эту статью.
А те, кто уже в курсе, посмотрите демонстрацию:

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

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

Создаем ссылки:

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

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

<a name="o_nas"> О нас </a>
<a name="kontakt"> Контакты </a>
<a href="#top">Вверх</a>

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

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

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

(function($){
$(document).on('click', 'a[href^=#]', function () {
$('html, body').animate({ scrollTop: $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 2000 );
return false;
});
})(jQuery);

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Как вставить ссылку в html</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>
<script>
(function($){
$(document).on('click', 'a[href^=#]', function () {
$('html, body').animate({ scrollTop: $('a[name="'+this.hash.slice(1)+'"]').offset().top }, 2000 );
return false;
});
})(jQuery);
</script>
</head>
<body>
<a name="top"></a>
<h2>Перевод песен.</h2>
<a href="#stih1">Перевод песни группы Type o negative</a>
<br>
<a href="#stih2">Перевод песни группы HIM</a>
<br>
<a href="#stih3">Перевод песни группы Nazareth</a>
<br><br><br><br><br><br><br><br>

<h3><a name="stih1">Перевод песни группы Type o negative</a></h3><a href="#top">Вверх</a>
<p>
Анестезия (перевод Ольга)<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>
Бегство и прятки – игра трусов.<br>
Средства исчерпаны, за исключением одного – анестезия,<br>
Анестезия...<br><br>
Я не чувствую ничего,<br>
Мне не нужно ничего,<br>
Мне не нужна любовь.<br>
</p>
<h3><a name="stih2">Перевод песни группы HIM</a></h3><a href="#top">Вверх</a>
<p>Кто-то сказал жестокую вещь:<br>
Давай умрём вместе <br><br>

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

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

Ооo<br><br>

Хочешь ли ты сегодня умереть ради любви?<br>
Крошка, давай умрём вместе!<br>
Хочешь ли ты умереть?<br>
Крошка, давай умрём вместе!<br>
Хочешь ли ты сегодня умереть ради любви?<br>
Крошка, давай умрём вместе!<br><br>
Этот мир -жестокое место,<br>
И мы там только потеряемся.<br>
Раньше мы жили в слезах, и теперь нам позволили,<br>
Смерть благословила нас...<br><br>

Ооо<br>

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

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

<br>
Хочешь ли ты сегодня умереть ради любви?<br>
Крошка, давай умрём вместе!<br>
Ты умрешь...<br>
Крошка, давай умрём вместе!<br>
Хочешь ли ты сегодня умереть ради любви?<br>
Крошка, давай умрём вместе!<br>
Крошка, давай умрём вместе!</p>
<h3><a name="stih3">Перевод песни группы Nazareth</a></h3><a href="#top">Вверх</a>
<p>Малая часть тебя<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>
Никогда и пытаться не будет</p>

</body>
</html>