Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не получается сделать прокрутку к якорю с сторонних страниц (https://javascript.ru/forum/dom-window/74531-ne-poluchaetsya-sdelat-prokrutku-k-yakoryu-s-storonnikh-stranic.html)

Igorsrt 18.07.2018 18:20

Не получается сделать прокрутку к якорю с сторонних страниц
 
Здравствуйте!
На главной странице есть блок с id "test". Хочу сделать на него переход с "прокруткой" из главного меню. Добавил скрипт:
jQuery('a.scroll').click(function() {
        jQuery("html, body").animate({
            scrollTop: jQuery(jQuery(this).attr('href')).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });

Если ставлю в меню ссылку "#test" - то на главной все красиво работает, на остальных, естественно, нет (т.к. этот якорь только на главной)... Если ставлю ссылку вида "http://site/#test" - прокрутка не работает... Что делать?

Nexus 18.07.2018 18:25

Указывайте ссылку относительно корня: /#test
$('a.scroll').click(function(e) {
    e.preventDefault();

    $("html, body").animate({
        scrollTop: $('#' + $(this).attr('href').split('#').pop()).offset().top + "px"
    }, 500);
});

рони 18.07.2018 18:43

переход к якорю при открытии страницы
 
Цитата:

Сообщение от Igorsrt
Что делать?

добавить в строку 9
var hash = window.location.hash;
hash && jQuery("a[href='"+hash+"']").click();

Igorsrt 18.07.2018 20:34

Цитата:

Сообщение от рони (Сообщение 490187)
добавить в строку 9
var hash = window.location.hash;
hash && jQuery("a[href='"+hash+"']").click();

..что-то не получается.. ((

рони 18.07.2018 20:49

Igorsrt,
ссылку в личку

рони 18.07.2018 23:04

... браузер автоматом прокручивает к блоку, предложенный вариант "прокрутки" при загрузке страницы не помог, по словам ТС ... может у кого есть свои соображения.
jQuery('a.scroll').click(function() {
        jQuery("html, body").animate({
            scrollTop: jQuery(jQuery(this).attr('href')).offset().top + "px"
        }, {
            duration: 500
        });
        return false;
    });

jQuery(window).on('load', function() {
var hash = window.location.hash;
hash && window.setTimeout(function() {
window.scrollTo(0,0);
jQuery("a[href='"+hash+"']").click()
},80)

})

madeas 19.07.2018 08:57

Может просто другой скрипт поставить? Если сайт без jquery, то я использую скрипт ниже. Его достаточно. Переходит с любой страницы к любому якорю. На всех страницах скролл плавный. Кроме перехода к якорю с другой страницы. Там просто бросает к нему.
var linkNav = document.querySelectorAll('[href^="#"]'),
    V = 1;
  for (var i = 0; i < linkNav.length; i++) {
    linkNav[i].addEventListener('click', function(e) {
      e.preventDefault();
      var w = window.pageYOffset,
        hash = this.href.replace(/[^#]*(.*)/, '$1');
      t = document.querySelector(hash).getBoundingClientRect().top,
        start = null;
      requestAnimationFrame(step);

      function step(time) {
        if (start === null) start = time;
        var progress = time - start,
          r = (t < 0 ? Math.max(w - progress / V, w + t) : Math.min(w + progress / V, w + t));
        window.scrollTo(0, r);
        if (r != w + t) {
          requestAnimationFrame(step)
        } else {
          location.hash = hash
        }
      }
    }, false);
  }

рони 19.07.2018 08:59

Цитата:

Сообщение от madeas
Переходит с любой страницы к любому якорю

где код?

рони 19.07.2018 09:05

madeas,
вопрос не в том как перейти к якорю, а наоборот как отменить переход к якорю при открытии страницы и заменить на кастомный, будет это на jquery или нет неважно, анимация она и в jquery сейчас на requestAnimationFrame.

madeas 19.07.2018 09:05

http://jsfiddle.net/qpfysknL/


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