Сделать плавную прокрутку к части страницы
 | |
| Рассмотрим очень полезную функцию, как задать или сделать плавную прокрутку к заданному месту ссылки или название на странице сайта. Такой скрипт в большинстве используют на мануалах, но больше на одностраничном интернет ресурсе. Так как с ним очень удобно вполне навигаций, где пользователь или гость быстро находит, тот или иной заголовок. При нажатие будет плавно передвигаться, что намного лучше, чем на скорости, так больше воспринимается суть. Где вы можете задать на любом элементе, как пример, в самом начале в название статьи или ключевого слова, где ниже будет отсылка на его, и по клику вы плавно поднимитесь к нему, где изначально задали якорь. Работает на одной страницы, но задать якоря вы можете, то количество, которое посчитаете нужным. Можно с уверенностью сказать, что будет являться неотъемлемой частью на тех страницах, где большие статьй и используется вертикальное положение на перемещение. Но как уже было сказано, все это создается только в на одной странице, если на следующей делать, то все также а аналогичном способе. Приступаем к установке: Идем а админ панель в страницу материала и комментариев к нему и почти в самом низу находим /body - где перед ним ставим скрипт. Код <script> (function($){ $(document).on('click', 'a[href^=#]', function () { $('html, body').animate({ scrollTop: $('[name="'+this.hash.slice(1)+'"]').offset().top }, 1000 ); return false; }); })(jQuery); </script> Если решите задать свой класс, то только на английских знаках нужно обязательно прописывать, а то просто не чего не сработает. На тестовом сайте проверил, все отлично работает. Теперь главному: Вы выбираете элемент, это может быть как название или другая надпись, и к нему нужно прописать name, где будет стоять значение, к примеру zornet_kratun, что закрепляем так name="zornet_kratun" к заметке или названию на странице. Код <a href="#zornet_kratun">Прокрутка к элементам</a> Также можно припарковать рядом с классом. Это мы ставим к названию: Код <h2 class="full-post-title" name="zornet_kratun"> Плавная навигация (прокрутка) страницы до якоря для uCoz </h2> На этом все, есть и другие примеры, но этот посчитал один из легких в установке, где не нужно не чего загружать файловый менеджер, а работает аналогично. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 16 | |
|
| |
