Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Отсутствует плавный скроллинг по якорям (https://javascript.ru/forum/dom-window/57982-otsutstvuet-plavnyjj-skrolling-po-yakoryam.html)

kos0760 28.08.2015 20:45

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

$('.sp-megamenu-wrapper ul li a').click(function(){
    $('html, body').animate({
  	scrollTop: $( $(this).attr('href') ).offset().top
        }, 900);
      return false;
   });


Ссылки на якоря в меню я прописываю в виде #id_якоря. Вроде как все хорошо, пока не понадобилось добавить на сайт еще несколько страниц. Если я нахожусь на любой из этих страниц и нажимаю на какой-либо пункт меню, я не могу переместиться к нужному якорю на главной. Если прописываю в меню путь к якорям в виде http://имя_домена.ru#id_якоря, тогда все ок, попадаю куда нужно. Но тогда, когда я на главной, пропадает плавная навигация при выборе пунктов меню. Перемещение идет рывками. Может кто сталкивался с подобным и подскажет, как решить проблему. Спасибо!

рони 28.08.2015 21:14

kos0760,
как вариант: дописывать путь в скрипте если не на главной

kos0760 28.08.2015 23:18

Цитата:

Сообщение от рони (Сообщение 386228)
kos0760,
как вариант: дописывать путь в скрипте если не на главной

Если бы вы подсказали как это сделать, я был бы очень благодарен!

рони 28.08.2015 23:38

kos0760,
ссылку скиньте в личку

Deff 29.08.2015 00:06

Цитата:

Сообщение от kos0760
тогда все ок, попадаю куда нужно. Но тогда, когда я на главной, пропадает плавная навигация при выборе пунктов меню. Перемещение идет рывками. Может кто сталкивался с подобным и подскажет, как решить проблему. Спасибо!

Как Вариант:
Удалять расширения ссылок на текущей странице
var lnk = document.URL.replace(/#.*$/,'');
a[href^=lnk].each(function(){
  this.href = this.href.replace(lnk,'');
});

рони 29.08.2015 00:49

kos0760,
пропишите пути как делали -- а чтобы вернуть плавность замените ваш скрипт на этот
jQuery('.sp-megamenu-wrapper ul li a').click(function(){
    var sel = this.hash;
    jQuery('html, body').animate({
  	scrollTop: jQuery(sel).offset().top
        }, 900);
      return false;
   });

kos0760 29.08.2015 00:59

Рони, спасибо! Кажется заработало!

рони 29.08.2015 01:11

kos0760,
можно ещё так дополнить ...
jQuery('.sp-megamenu-wrapper ul li a').click(function(){
    var sel = this.hash;
    jQuery('html, body').animate({
  	scrollTop: jQuery(sel).offset().top
        }, 900);
      return false;
   });

  var hash = document.location.hash;
  hash && jQuery('.sp-megamenu-wrapper ul li a[href *="'+hash+'"]').click();

только вопрос успеет сработать или нет )))

kos0760 29.08.2015 01:21

Цитата:

Сообщение от рони (Сообщение 386254)
kos0760,
можно ещё так дополнить ...
jQuery('.sp-megamenu-wrapper ul li a').click(function(){
    var sel = this.hash;
    jQuery('html, body').animate({
  	scrollTop: jQuery(sel).offset().top
        }, 900);
      return false;
   });

  var hash = document.location.hash;
  hash && jQuery('.sp-megamenu-wrapper ul li a[href *="'+hash+'"]').click();

только вопрос успеет сработать или нет )))

Ну в принципе и предыдущее решение как бы работает неплохо, но я добавил ваш новый код. Только вот кнопка "домой" в меню не работает как остальные пункты, но мне это не важно, здесь страница перемещается наверх, можно просто сделать отдельную кнопку с такой функцией, а этот пункт меню убрать.

kos0760 29.08.2015 01:28

Цитата:

Сообщение от рони (Сообщение 386254)
kos0760,
можно ещё так дополнить ...
jQuery('.sp-megamenu-wrapper ul li a').click(function(){
    var sel = this.hash;
    jQuery('html, body').animate({
  	scrollTop: jQuery(sel).offset().top
        }, 900);
      return false;
   });

  var hash = document.location.hash;
  hash && jQuery('.sp-megamenu-wrapper ul li a[href *="'+hash+'"]').click();

только вопрос успеет сработать или нет )))

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


Часовой пояс GMT +3, время: 22:52.