BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

Такая плавная прокрутка делается с помощью библиотеки 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="https://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="https://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»:

<div id="stih1"></div>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Как сделать плавную прокрутку к якорю на JQuery. Способ№1

  1. роман

    Здравствуйте . Подскажите пожалуйста , я сделал блок (), потом в произвольных ссылках меню прописывал этот id через # , но все равно скролинг не работает , может быть Вы знаете как его сделать? я хочу при нажатие на кнопку «Try»сделать скроллинг.
    Я думаю дело в каком то скрипте , но не как не могу понять в каком(

  2. Степан => автор блога Степан => автор блога

    Здравствуйте, Роман!
    Это может быть что угодно.
    Смотрите в мой код, и по такому принципу разместите у себя на сайте.
    Проверьте, не подключен к вашему сайту другая версия jquery-1.11.2.js

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573