Как сделать плавный переход внутри страницы html

Якоря

Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.

Для создания якоря следует вначале сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега (пример 9.1). В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.

Пример 9.1. Создание якоря

      
.
 
Наверх
  

Между тегами и текст не обязателен, так как требуется лишь указать местоположение перехода по ссылке, находящейся внизу страницы. Имя ссылки на якорь начинается с символа #, после чего идет имя якоря, оно выбирается любое, соответствующее тематике. Главное, чтобы значения атрибутов name и href совпадали (символ решетки не в счет).

С якорями связана одна особенность работы браузера. После перехода к указанному якорю нажатие на кнопку «Назад» возвращает не на предыдущую просмотренную страницу, а к ссылке, с которой был сделан переход к якорю. Получается, что для перехода к предыдущему документу надо нажать кнопку «Назад» два раза.

Cсылку можно также сделать на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в атрибуте href тега надо указать адрес документа и в конце добавить символ решетки # и имя закладки (пример 9.2).

Пример 9.2. Ссылка на закладку из другой веб-страницы

      
Перейти к нижней части текста
  

В данном примере показано создание ссылки на файл text.html, при открытии этого файла происходит переход на закладку с именем bottom.

Если на веб-странице содержится ссылка на якорь, а самого якоря нет, то никакой ошибки не возникнет.

Якоря и плавный переход по якорным ссылкам

Что-то я заработался и давно не писал статей. Что же, будем исправляться. недавно к одной из статей, один из посетителей оставил вопрос, который касался якорных ссылок. Я пообещал, что скоро напишу статью о них.

И так, давайте узнаем для начала, что такое якорные ссылки или просто якоря. Якорные ссылки — это ссылки, которые перемещают посетителя на определенные места на странице. По своей сути, это как закладки. Если страница имеет большой объем и по сути разделена разными блоками, можно сделать так, чтобы посетитель смог сразу перейти на нужную часть страницы, не пользуясь скроллом.

Такие якорные ссылки часто используются на страницах F.A.Q.. На таких страницах, много разных пунктов с ответами на частые вопросы. Чтобы в ручную не прокручивать весть текст, в начале располагаются эти вопросы с ссылками на нужный абзац. Так же часто такие якорные ссылки используют в лендингах (посадочных страницах). Я тоже часто использую в лендингах такие якоря, если заказчик просит об этом. Лендинги часто длинные и поэтому такие якоря не плохой помощник.

Пример работы таких ссылок можно посмотреть на этой страничке:

Как сделать переход по якорным ссылкам внутри страницы? Все очень просто. Основная идея в том, чтобы вместо ссылки указать именно имя якоря.

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним — #

Якорем будет блок с ID — #yak1. Далее просто прописываем нужный элемент с нужным айди.

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

Чтобы реализовать плавное перемещение по якорям, нужно подключать — jQuery. Когда-то я долго искал нужный скрипт и перерыл кучу информации. У большей половины показаны скрипты, которые просто уже не работают на новых версиях библиотек. Возможно, Вы тоже находили эти скрипты, перед тем, как попасть на мой сайт. Тогда мне попался данный скрипт, который был отличным решением, для моих задач.

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.

Теперь после библиотеки, подключаем сам скрипт, который и будет осуществлять анимацию плавного перехода.

Во второй строке скрипта указывается айди блока с якорными ссылками. Как пример, можно организовать вот такой блок:

В шестой строке указана цифра 1500 — время в миллисекундах и равно 1,5 секундам. Это время за которое совершается переход к нужному якорю. Чтобы ускорить или замедлить анимацию, просто измените число.

По желанию задаете стили в соответствии с внешним видом страницы и наслаждаемся результатом �� Возможно Вы также захотите, чтобы у посетителя была возможность вернуться наверх, в этом Вам поможет статья — кнопка возврата на верх страницы java и jquery.

На этом все, спасибо за внимание. ��

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂

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

При навигации на одностраничных сайтах, организованной с помощью анкоров (a[name=target]), а также при серфинге по длинным документам с содержанием, перелинкованном на разделы станицы, наблюдается проблема удобства использования: переход происходит мгновенно, пользователь не всегда видит куда его перебросило и на чем следует сфокусировать взор. Демо.

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

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

Будем использовать мощь jQuery. Мы перехватим переходы по анкорам и плавно прокрутим страницу к цели перехода, а после этого пару раз мигнем элементом, однозначно характеризующим цель перехода (или самою целью, как будет угодно).

При переходах извне цель просто подмигивает, необходимости крутить страницу нету. При внутренних переходах прокручиваем и подмигиваем.

Разметка страницы (псевдокод)

ol
a href=»#цель1″
a href=»#цель2″
a href=»#цель3″
/ol

a name=»цель1″
какой-то контент
a name=»цель2″
какой-то контент
a name=»цель3″
какой-то контент

Джаваскрипт (jQuery подключена по умолчанию)

// Это подсветит заголовок-цель при переходе с другой страницы.
var url = window.location;
var anchor = url.hash; //anchor with the # character
var anchor = url.hash.substring(1); //anchor without the # character

$( ‘[name=’ + anchor + ‘]’ ).next( ‘h2’ )
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn();

// Это обеспечит плавную прокрутку к цели и ее подсветку.
$( ‘.toc a’ ).click( function () var url = this ;
var anchor = url.hash; //anchor with the # character
var anchor = url.hash.substring(1); //anchor without the # character

// В Опере какие-то проблемы с определением отступа сверху, поэтому считаем его по-другому.
// Кроме того, для нее нужно убрать селектор body.
if (! $.browser.opera ) var targetOffset = $( ‘a[name=’ + anchor + ‘]’ ).offset().top;
$( ‘html,body’ ).animate(, 1500);
> else var targetOffset = $( ‘a[name=’ + anchor + ‘]’ ).next( ‘h2’ ).offset().top;
$( ‘html’ ).animate(, 1500);
> // if!opera

// Подмигнем заголовком три раза.
$( ‘[name=’ + anchor + ‘]’ ).next( ‘h2’ )
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn()
.fadeOut()
.fadeIn();

//Чтобы страница не дергалась при клике.
return false ;

// Здесь надо что-нибудь сделать чтобы в строке адреса не обрезался хеш.
//window.location.replace(this.pathname + ‘#’ + anchor);

>); // click
>); // document ready

* This source code was highlighted with Source Code Highlighter .

Плавная прокрутка к якорю средствами css?

Здравствуйте! Есть ли возможность сделать прокрутку до якоря на странице, только на css? Если да, то как?

• Вопрос задан более трёх лет назад
• 35064 просмотра

Комментировать
Решения вопроса 1

Есть конечно же такая возможность: jsfiddle
Ответ написан более трёх лет назад
Нравится 9 4 комментария
jeruthadam @jeruthadam
Прикольный хак.
iugi @iugi Автор вопроса
То что нужно!

Ах ты шайтан!)) Вкопилку. потом разберусь что там куда, и как улучшить))

прикольно, но это скорее ближе к каруселям )) так что нету без js плавной прокрутки )
Ответы на вопрос 5

html scroll-behavior: smooth;
>

Ответ написан более трёх лет назад
Нравится 38 3 комментария

Просто нет слов! Сидел ломал голову над JS вариантами, а оказывается всё решается 3-мя строчками, да еще и в HTML.
Спасибо, дорогой коллега!!

Egor, Egor,
Было-бы хорошо так если-бы не было-бы так плохо с поддержкой на остальных браузерах.
scroll-behavior: smooth;
Даже если откинуть все малоиспользуемые браузеры остаются Safari и IE без поддержки..
Решение не подходит (если конечно вы не решили забить на пользователе тех браузеров)

Bakhtin_PA @Bakhtin_PA

На сегодняшний день показывает, что полная поддержка.

Алекс Глебов @SkiperX Куратор тега CSS
css ничего не знает про скролл
в чем проблема нагуглить js решение?
Ответ написан более трёх лет назад
Нравится 1 2 комментария
iugi @iugi Автор вопроса
интересно все-таки

Дмитрий @Itachi261092
А ниже что написано?

html

vladimir_html @vladimir_html

Зачем засорять CSS десятками строк кода, если существует вот такое простое решение на jQuery?
https://impuls-web.ru/plavnaya-prokrutka-stranicy-.

Ответ написан более трёх лет назад
Нравится 1 3 комментария

Дмитрий @Itachi261092
десятками? Выше же человек написал одно единственное свойство которое это делает
Отлично! Спасибо!
Дмитрий, где делает? Оно ничего не делает. Бесполезный ответ

Вы можете воспользоваться полифилами
Просто перейдите по этой ссылке в github репозиторий и установите его в свой проект.

• Изначально поддерживается в Chrome и Firefox
• Safari 6+
• Internet Explorer 9+
• Microsoft Edge 12+
• Opera Next

Его довольно просто использовать

let button1 = document.getElementById('button1'); let button2 = document.getElementById('button2'); let formaSend = document.getElementById('main-form'); button1.addEventListener('click', smoothscroll); button2.addEventListener('click', smoothscroll); function smoothscroll() < formaSend.scrollIntoView(< behavior: 'smooth' >); >

Ответ написан более двух лет назад
Комментировать
Нравится 1 Комментировать
Stalker_RED @Stalker_RED
В css прокрутку сделать нельзя, но можно в самом html

прокрутка до yakor 




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz




zz 

zz

И это действительно прокрутка страницы, а не перемещение элементов по странице как у 0X12eb

Ответ написан более трёх лет назад
iugi @iugi Автор вопроса
Но она не плавная, а про якори я знал.
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 2 часа назад
• 20 просмотров