Плавная прокрутка до элемента на jQuery
 | |
| Вашему вниманию отличное решение на плавный скроллинг на заданный элемент, где плавный переход реализован при помощи jQuery и стиля CSS. Вероятно вы встречали не редко навигацию на различных интернет сайтах, где при клике на ключевое слово происходит прокрутка на страницы до заданного материала. Больше всего можно встретить на одно страничном сайте или на портфолио, но сейчас оно стало популярным на официальных площадках. Так как вы изначально задаете ключевые фразы и под них выставляете на страницы якоря. Где пользователь и гость читает, и если ему нужна это информация, то происходит клик и происходит прокрутка, где останавливается ровно на том материале, где был указан в меню, вообще тот который он по клику искал. Но это все для ознакомления, чтоб было понятно как все работает, для этого будет предоставлено demo страница, где можете оценить в реальности. Переходим к материалу, так как в данном мануале подробно рассмотрим и разберем как веб мастеру реализовать плавный скролл, где используется jQuery. Также присутствует структура HTML страницы, где изначально начнем, так как атрибуты ссылок href изначально закреплены под якоря #id где идет полное соответствие блокам, как раз до которых идет прокручивание или скролл на странице. Его можно использовать как в начале, где основном выстраивают навигацию. Приступаем к установке: HTML Код <body> <div class="detumiska"> <ul> <li><a href="#kagasblusa1">Первый блок</a></li> <li><a href="#kagasblusa2">Второй блок</a></li> <li><a href="#kagasblusa3">Третий блок</a></li> </ul> </div> <div id="kagasblusa1">Каркас под номером 1</div> <div id="kagasblusa2">Каркас под номером 2</div> <div id="kagasblusa3">Каркас под номером 3</div> </body> CSS Код .detumiska ul{ overflow: hidden; } .detumiska li { list-style: none; /* float: left; */ } #kagasblusa1{ width:100%; height:500px; background-color: #ef3b3b; } #kagasblusa2{ width:100%; height:500px; background-color: #18bd18; } #kagasblusa3{ width:100%; height:500px; background-color: #5454e6; } JS Теперь осталось добавить js скрипт, который отвечает за функцию и плавность эффекта. Код jQuery(document).ready(function(){ jQuery('.detumiska a[href^="#"]').click( function(){ var scroll_el = jQuery(this).attr('href'); var destination = jQuery(scroll_el).offset().top; if (jQuery(scroll_el).length != 0) { jQuery('html, body').animate( { scrollTop: destination }, 1100 ); } return false; }); }) Некоторые блогеры и администраторы интернет площадок помещают в сам контент, где отлично вписывается, так как прописывают ключевые фразу, и под них ставят якорь, где при переходе вы можете ознакомиться, что означает то слово или фраза, по которой вы сделали переход. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
