Как реализовать плавный скролл с дочерней страницы?

Question

[seregindev]

Доброго времени суток.
Столкнулся с такой проблемой.
Мне нужно реализовать такой алгоритм.
1)Находясь на дочерней странице, мы кликаем по элементу меню и нас переносит на главную страницу.
2)После перехода, происходит мягкий скролл к ому элементу(якорю) который был выбран.

Проблема такая, по условию, если нету на странице(на который ссылается данный пункт меню) мы переходим на главную страницу. После клика происходит следующие, начинается загрузка страницы, и срабатывает сразу скролл.
А мне нужно сделать так, только после того как загрузится страница, будет происходить скролл.

jQuery(function($) {
var homepage = 'http://rcamedia.ru/';
$('a[href*="#"]').live('click', function(event) {
  var attrib = $(this).attr('href');
  console.log(attrib);
    if (attrib == "#") {}
    else if($("div").is(attrib)) {}
     else {
       window.location = homepage;
       $(function() {
        if(window.location.hash) {
            var target = window.location.hash;
// убираем хеш из строки(отключаем дефолтный "прыжок")
            window.location.hash = "";
// аниммируем скролл
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 300, function () {
// возыращаем хеш
                window.location.hash = target;
            });
        }
});
}
    event.preventDefault(); //сам скрол
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    //change this number to create the additional off set
    var customoffset = 85;
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);

});

<ul id="menu-topen-1" class="menu">
<li class="menu-item"><a href="#">Solutions</a></li>
<li class="menu-item"><a href="#">Team</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>

Answer 1

[Yevgeniy Kisselyov]

В коде загружаемой страницы

$(function() {
        if(window.location.hash) {
            var target = window.location.hash;
// убираем хеш из строки(отключаем дефолтный "прыжок")
            window.location.hash = "";
// аниммируем скролл
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 300, function () {
// возыращаем хеш
                window.location.hash = target;
            });
        }
});

Comments

[seregindev]

К сожалению не сработало или я что-то не так сделал ?(

[Yevgeniy Kisselyov]

Что-то такая каша у вас в скрипте получилась, зря вы с моим решением перемешали, вам разделить нужно.
1: вот этот скрипт должен быть на той странице которая загрузилась и которую нужно плавно после загрузки проскроллить(как я понял это будет главная страница):

jQuery(function ($) {
        if (window.location.hash) {
            var target = window.location.hash;
            // убираем хеш из строки(отключаем дефолтный "прыжок")
            window.location.hash = "";
            // аниммируем скролл
            var target_offset = $(target).offset() ? $(target).offset().top : 0;
            var customoffset = 85;
            $('html, body').animate({
                scrollTop: scrollTop:target_offset - customoffset
            },500, function () {
                // возыращаем хеш
                window.location.hash = target;
            });
        }
    });

тогда при переходе на главную по урлу например(rcamedia.ru/#myblock)
загрузится главная страница(rcamedia.ru/) и после этого медленно проскроллится до блока с id="myblock"

[seregindev]

Yevgeniy Kisselyov: Я добавил само меню для примера. Каков механизм. Кликнув на элемент Blog(ссылка на другую страницу), попав на эту страницу, я кликаю по элементу "Solutions", тогда я перехожу автоматически на главную страницу, а после того как я захожу, происходит скролл к блоку "Solutions".
А у меня происходит следующие, кликнув по элементу, у меня происходит переход на страницу и всё, скрола нету.
После я проверил, как оказалось, скролл срабатывает до того как происходит переход на другую страницу
Не получается решить данную проблему

[Yevgeniy Kisselyov]

seregindev: Чтобы скролл срабатывал после перехода на какую-либо страницу -
код для скролла который я привел нужно разместить на этой самой странице(куда осуществляется переход) и он загрузится и сработает сразу после загрузки страницы.

Если вы например переходите с блога на главную - то JS код скроллинга должен быть на главной странице.

Возможно у вас вообще нет никакого перехода по страницам и контент грузится аяксом?

[Yevgeniy Kisselyov]

seregindev: И в коде я после всего этого еще опечатку допустил:
вместо:
scrollTop: scrollTop:target_offset - customoffset
нужно
scrollTop: target_offset - customoffset

[Yevgeniy Kisselyov]

seregindev:
Вот пример при переходе скролл плавно по якорю уходит вниз при загрузке страницы:
codepen.io/anon/pen/pRjPpR#ct2
к блоку id="ct2"
Этот же пример если не передать якорь естественно не сработает:
codepen.io/anon/pen/pRjPpR

[seregindev]

Я сделал как вы сказали, разместил скрипт на главной странице. По итогу пропал плавный скролл и в адресной строке появляются теги элементов на которые ссылаются данные элементы. А со страницы блога перестал происходить переход на главную :(

[Yevgeniy Kisselyov]

seregindev:
Почитал ваши вопросы и кажется понял суть проблемы.
У вас одно подключаемое меню на всех страницах правильно?
Что вам мешает сделать это меню такого вида?

<ul id="menu-topen-1" class="menu">
  <li class="menu-item"><a href="http://rcamedia.ru/#solutions">Solutions</a></li>
  <li class="menu-item"><a href="http://rcamedia.ru/#team">Team</a></li>
  <li class="menu-item"><a href="http://rcamedia.ru/blog">Blog</a></li>
  <li class="menu-item"><a href="http://rcamedia.ru/#contact">Contact</a></li>
</ul>

(ссылку на блог поставить свою)
На главной странице в таком случае будет js код:

Весь остальной JS ваш убрать и с главной и со страницы блога(там в этом случае вообще ничего не нужно)
Вот эти манипуляции вообще мне непонятно зачем нужны :

var homepage = 'http://rcamedia.ru/';
$('a[href*="#"]').live('click', function(event) {
  var attrib = $(this).attr('href');
  console.log(attrib);
    if (attrib == "#") {}
    else if($("div").is(attrib)) {}
     else {
       window.location = homepage;

[Yevgeniy Kisselyov]

seregindev:
Похоже все не влезло просто, обрезалось почему-то
На главной странице в таком случае будет js код:

jQuery(function ($) {
        if (window.location.hash) {
            var target = window.location.hash;
            // убираем хеш из строки(отключаем дефолтный "прыжок")
            window.location.hash = "";
            // аниммируем скролл
            var target_offset = $(target).offset() ? $(target).offset().top : 0;
            var customoffset = 85;
            $('html, body').animate({
                scrollTop: target_offset - customoffset
            },500, function () {
                // возыращаем хеш
                window.location.hash = target;
            });
        }


        $("#.menu a[href^='#']").on('click', function(e) {
            e.preventDefault();
            var target = this.hash;
            var target_offset = $(target).offset() ? $(target).offset().top : 0;
            var customoffset = 85;
            $('html, body').animate({
                scrollTop: target_offset - customoffset
            }, 500, function(){

            });
        });

    });

[seregindev]

Yevgeniy Kisselyov: Всё сработало! Спасибо вам огромное! Единственный момент, который возник. В адресной строке остаётся "rcamedia.ru/#solutions", можно ли от этого избавиться и оставить просто "rcamedia.ru" ?

[Yevgeniy Kisselyov]

seregindev: Можно. Уберите строчку
window.location.hash = target;
Но в таком случае если юзер захочет обновить страничку то без якоря в адресной строке скролл не сработает.
Смотрите сами.

[seregindev]

Yevgeniy Kisselyov: Простите, столкнулся с такой проблемой, при клике на элемент который имеет ссылку перед самим якорем, не срабатывает плавный скролл.
И ещё один момент, я сделал как вы сказали, убрал строку
window.location.hash = target;
Но это не изменило ситуации.
Всё равно происходит скролл, только в адресной строке появляется "#"

Answer 2

[Андрей]

Так дождитесь загрузки страницы

$( document ).ready(function() {
  // Handler for .ready() called.
});