Якорь на JS

[dalurist]

DLE. Есть такой скрипт в конце main.tpl:

<script>
$(document).ready(function(){
  $('a[href^="#"], *[data-href^="#"]').on('click', function(e){
  e.preventDefault();
  var t = 1000;  
  var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
  $('html,body').stop().animate({ scrollTop: $(d).offset().top }, t);
  });
}); </script>

Теперь переходя по ссылке href="#123" или с атрибутом "data-href="#123" в пределах этой страницы происходит плавная прокрутка до <div id=123>.
Если переходить с другой страницы сайта по ссылке на страницу href="/адрес_страницы#123" переход не плавный.
Как исправить? Спасибо.

 

[Absolute]

Если переходить с другой страницы сайта по ссылке на страницу href="/адрес_страницы#123" переход не плавный.
Как исправить? Спасибо.

$(document).ready(function(){
if(window.location.hash != '' && $(window.location.hash).length > 0){
   $(document).scrollTop(0);
   $('html,body').animate({ scrollTop: $(window.location.hash).offset().top }, 1000);
  }
});

 

[dalurist]

Теперь в пределах главной страницы не плавная....

 

[Absolute]

Теперь в пределах главной страницы не плавная....

Дайте ссылку на сайт.

 

[dalurist]

Дайте ссылку на сайт.

Для просмотра ссылки Войди или Зарегистрируйся Кнопка "О сайте".

 

[Absolute]

Посмотрел. Во-первых, эти два скрипта нужно было совместить. Очевидно же.

$(document).ready(function(){
  $('a[href^="#"], *[data-href^="#"]').on('click', function(e){
  e.preventDefault();
  var t = 1000;
  var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
  $('html,body').stop().animate({ scrollTop: $(d).offset().top }, t);
  });

if(window.location.hash != '' && $(window.location.hash).length > 0){
   $(document).scrollTop(0);
   $('html,body').animate({ scrollTop: $(window.location.hash).offset().top }, 1000);
  }
});

Во-вторых, ^ - означает начало атрибута, а вы ждете, что скрипт сработает на

<a href="http://site.ru/#features">О сайте</a>

Правильно:

<a href="#features">О сайте</a>

И еще я бы делал проверку существования элемента, к которому хотите прокрутить, иначе при несуществующем элементе $(d).offset().top выпадеть в ошибку вроде TypeError: Cannot read property 'top' of undefined.

if($(d).length === 0){
   return;
}

Добавить под строку var d = $(this).attr('da......

 

[dalurist]

Во-вторых, ^ - означает начало атрибута, а вы ждете, что скрипт сработает на
<a href="Для просмотра ссылки Войди или Зарегистрируйся">О сайте</a>
Правильно:
<a href="#features">О сайте</a>

Если оставить href="#features" плавная прокрутка только в пределах главной страницы, ссылка с другой страницы сайта не работает, если оставить href="site.ru/#features" то с другой страницы переходит плавно до якоря, а с главной стремительно без скролла... Посмотрите на сайте Для просмотра ссылки Войди или Зарегистрируйся в верхней кнопке О САЙТЕ в ссылке просто href="#features" , в кнопке О САЙТЕ которая над картинкой в меню "site.ru/#features".

 

[Absolute]

Если оставить href="#features" плавная прокрутка только в пределах главной страницы, ссылка с другой страницы сайта не работает, если оставить href="site.ru/#features" то с другой страницы переходит плавно до якоря, а с главной стремительно без скролла... Посмотрите на сайте Для просмотра ссылки Войди или Зарегистрируйся в верхней кнопке О САЙТЕ в ссылке "site.ru/#features" в кнопке О САЙТЕ которая над картинкой в меню просто href="#features".

Ну, тогда пишите так:

<a data-href="#features" href="http://site.ru/#features">О сайте</a>

$(document).ready(function(){
  $('a[href^="#"], *[data-href^="#"]').on('click', function(e){
    var t = 1000;
    var d = $(this).attr('data-href') ? $(this).attr('data-href') : $(this).attr('href');
    if($(d).length === 0){
      return;
    }
    e.preventDefault();
    $('html,body').stop().animate({ scrollTop: $(d).offset().top }, t);
  });

  if(window.location.hash != '' && $(window.location.hash).length > 0){
    $(document).scrollTop(0);
    $('html,body').animate({ scrollTop: $(window.location.hash).offset().top }, 1000);
  }
});