» »

Сделать плавную прокрутку к части страницы

Сделать плавную прокрутку к части страницы

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

При нажатие будет плавно передвигаться, что намного лучше, чем на скорости, так больше воспринимается суть. Где вы можете задать на любом элементе, как пример, в самом начале в название статьи или ключевого слова, где ниже будет отсылка на его, и по клику вы плавно поднимитесь к нему, где изначально задали якорь.

Работает на одной страницы, но задать якоря вы можете, то количество, которое посчитаете нужным. Можно с уверенностью сказать, что будет являться неотъемлемой частью на тех страницах, где большие статьй и используется вертикальное положение на перемещение. Но как уже было сказано, все это создается только в на одной странице, если на следующей делать, то все также а аналогичном способе.

Приступаем к установке:

Идем а админ панель в страницу материала и комментариев к нему и почти в самом низу находим /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>

На этом все, есть и другие примеры, но этот посчитал один из легких в установке, где не нужно не чего загружать файловый менеджер, а работает аналогично.
05.11.2017 Просмотров: 284 Комментарий: (16)

Поделиться в социальных сетях

Материал разместил

Комментарий: 16
Kosten
Kosten 05.11.2017 21:381
0
Пока можно посмотреть на тестовом сайте, что не стал убирать, где в самом низу увидите, и по клику приведет к тому запросу, что указал, как в описание написано. Переходим на эту страницу, там находится эта функция и демонстрация в работе.
workman
workman 06.11.2017 11:002
0
Данный скрипт не будет реагировать на те ссылки которые открывают модальные окна кто установил. К ссылкам необходимо привязывать запрет и также в скрипте прописать. Если у вас на лейдилинг, то окошки открываться не будут к сожалению. Как сделать запрет работы скрипта к определенным ссылкам? Показываю.... Вот этот же скрипт.Пришлось в нем прописать немного запрета на ссылки открытия окон .not(".not")
Код
<script> $(document).ready(function(){$('a[href^="#"], a[href^="."]').not(".not").click(function(){var a=$(this).attr("href");return 0!=$(a).length&&$("html,body").animate({scrollTop:$(a).offset().top},1000),!1})});</script>

и на самой ссылке или кнопке прописываем id таким образом
Код
<a href="#reviews" class="not">ссылка вызова окошка</a>
Если у вас уже прописан свой CLASS к данной ссылке, например class="botton" то добавляем к нему класс с JS таким образом
Код
<a href="#reviews" class="botton not">ссылка вызова окошка</a>
Kosten
Kosten 06.11.2017 11:213
0
workman, он не для модального окошка сделан, а больше для одностраничного сайта, но или большой написанной темы с ключами.
workman
workman 06.11.2017 13:174
0
Если на сайте стоят ссылки на модальные окна то они срабатывать не будут по первому скрипту. Это понимаешь?
workman
workman 06.11.2017 13:215
0
В скипте это именно
Код
'a[href^=#]'
делать НЕ рабочей ссылку модального окна если на ссылке вызова привязана # например
Код
<a href="#" id="win1">Вызов модального окна</a>
Kosten
Kosten 06.11.2017 13:596
0
Вот за какую тему, про модальное окно не подумал.
workman
workman 06.11.2017 14:457
0
Вот именно. На сайтах бывает стоят модальные окна и скрипты плавной прокрутки до якоря, а скрипт мог просто блокировать именно ссылку на модал ))
Kosten
Kosten 06.11.2017 21:348
0
А можно как то обойти, то возможно кто то хочет установить, а вот модальное окно, как то не хочется снимать.
Kosten
Kosten 07.11.2017 12:569
0
Есть такая тема, думаю, что модальному окну мешать не будет, а функция аналогична, что также задается якорь, но уже по другому.

Скачиваем архив, и там файл, что в корень сайта его располагаем, а далее по такой инструкций.

Для начало папку создаем sslide и туда закидываем файл, следующее действие, это в head вашего сайта ставим.

Код
<script src="sslide/slide.js"></script>


Это будет вызов.

Код
<a href="#services">Services</a>


Это ссылка, вызывающая плавную прокрутку. А сам элемент заключаем в divную структуру:

Код
<div id="services">  
...  
</div>


Думаю, механизм понятен. Но все же "разберем по косточкам".

Все вы заметили, что в DIVе и в ссылке есть неслучайное совпадение:

Код
<a href="#services">Services</a>


Это ссылка, вызывающая плавную прокрутку. А сам элемент заключаем в divную структуру:

Код
<div id="services">  
...  
</div>


В роли "главного" здесь выступает DIV с контентом. Именно он задает значение атрибута href, то есть если было бы

Код
<div id="play">  
...  
</div>


То и в кнопке будут изменения:

Код
<a href="#play">Play</a>


Вот вся установка.

Способ на Урааа нашел, что прилагается демонстрация на эту функцию.
workman
workman 07.11.2017 13:4610
0
ну вот сам скрипт того что ты дал на скачку ...
Код
$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
  e.preventDefault();

  var target = this.hash,
  $target = $(target);

  $('html, body').stop().animate({
  'scrollTop': $target.offset().top
  }, 900, 'swing', function () {
  window.location.hash = target;
  });
  });
});


Что в нем блокирует? А блокировать будет это
Код
$('a[href^="#"]')
Kosten
Kosten 07.11.2017 14:5811
0
Знать не как не обойти, чтоб все 2 функций параллельно работали.
workman
workman 07.11.2017 19:3612
0
Так я тут в комментариях положил рабочий скрипт,который работает на обе стороны
Kosten
Kosten 07.11.2017 20:4413
0
Так, что то не заметил, интернет рыл, где найти такой код, нужно будет отдельным материалом залить.
workman
workman 08.11.2017 22:0914
0
Так я же еще раз повторюсь, что я уже дал рабочий, который и плавную прокрутку к якорю делает и окна открывает. Подробнее в моем комментарии выше
Kosten
Kosten 08.11.2017 22:4715
0
Все, нужно реально вывести как материал, чтоб на комментарий не ссылаться.
Kosten
Kosten 09.11.2017 13:2816
0
А если так прокрутку сделать, что не помешает модальному окну. Здесь как видно не чего не связывает с ним, не проверял, но нашел такую версию на одном сайте, что возможно параллельно с окнами идет и будет отвечать за свою функцию.

Создаем ссылку якорь для плавной jQuery прокрутки

И так, что бы создать якорь для плавной jQuery прокрутки, нужно прописать, в нужном вам месте страницы, следующий код:

Код
<span name="anchor1">Якорь в тексте вашей статьи, в месте до которого нужно осуществить переход.</span>


После этого, нам нужно сделать в начале статьи ссылку, нажав на которую осуществится плавная jQuery прокрутка.

Для этого создаем ссылку следующего вида:

Код
<a href="#anchor1">Ссылка для переход к метке на странице вашего сайта</a>


Как вы уже поняли, для этой цели мы будем использовать скрипт на jQuery, подключив его к сайту. Он довольно небольшой, но невероятно полезный

Код
<script type="text/javascript">
$(document).ready(function() {
  $('a[href^="#"]').click(function () {  
  elementClick = $(this).attr("href");
  destination = $(elementClick).offset().top;
  if($.browser.safari){
  $('body').animate( { scrollTop: destination }, 1100 );
  }else{
  $('html').animate( { scrollTop: destination }, 1100 );
  }
  return false;
  });
  });
</script>
avatar