Как сделать плавную прокрутку к якорю на другой странице?

Question

[heyheyway]

Здравствуйте, подскажите как можно организовать плавную прокрутку к якорю который находиться на другой странице?

<a href="http://mysite.com/faq/#anchor" target="_blank">к якорю на mysite.com/faq</a>

на
<div id="anchor" class="in"></div>

Перед якорем находяться еще блоки высотой ~1000px

Answer 1

[Денис Инешин]

1. Блокируем работу якорей по умолчанию. Это делается очень просто:
- в адресной строке называем якорь скажем #anchor_contacts
- в то время как реальное название просто #contacts

2. Пишем небольшой скрипт, который просто запускается на

$(document).ready(function () {
    var hash = document.location.hash;
    var anchor = hash.split("_")[1]; // получили имя якоря

    // теперь можно прокручивать
    var target = $("#" + anchor); // по id, можете заменить на name, если что
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 1000);
});

Comments

[heyheyway]

Спасибо за ответ, но не работает, может конфликтует с каким-то из подключенных скриптов.

[Денис Инешин]

heyheyway: код написан примерный, может вы что-то делаете не так, может у вас name, а не id, может у вас jQuery не подключен. Ищите, открывайте консоль, смотрите на ошибки. Дебажьте элементы, чтобы понять где проблема.

[Евгений Леонов]

Мне очень помогло - то, что искал! Спасибо!

[Сергей Василенко]

Я не сразу увидел красоту этого метода)
там лучше подписать.... //получили очищенное имя якоря- #anchor_contacts превращается в #contacts
Т.е такой подход нужен чтобы страница не дёргалась.

И ещё можно подчистить URL после...

$(document).ready(function () {
  var hash = document.location.hash;
  // получили очищенное имя якоря- #anchor_search превращается в #search
  var anchor = hash.split("_")[1]; 

  // теперь можно прокручивать
  var target = $("#" + anchor);
  $('html, body').animate({
    scrollTop: target.offset().top
  }, 1000);

  //очищаем хеш из URL
  history.replaceState({}, document.title, window.location.href.split('#')[0]);
});

Спасибо!

[Денис Инешин]

Сергей Василенко, пожалуйста)

Answer 2

[Сергей Василенко]

А можно ещё вот так:

var myHash = window.location.hash; //получаем значение хеша
history.replaceState({}, document.title, window.location.href.split('#')[0]); //очищаем хеш

$(document).ready(function(){
    if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение
        $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); //скроллим за полсекунды
    };
});

В таком варианте, не придётся подменять #anchor_search на #search

Обратите внимание, что внутри
$(document).ready(function(){

только часть скрипта

Ну или вот так https://qna.habr.com/q/355083