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

Question

[seregindev]

Доброго времени суток!
Уже не в первый раз обращаюсь с данным вопросом, так что заранее извиняюсь.
Передо мной встала такая задача.

У меня имеется навигационное меню с 4-мя элементами которые служат кнопками для якорей. Но есть 1(которая переносит нас на другую страницу). Вот здесь всё и начинается.
Не могу придумать никак решение, точнее оно вроде бы есть, но не могу его реализовать.
В чём собственно проблема.
Находясь на этой странице, я кликаю по элементу навигационного меню.
И что должно происходить:
1)Переход на главную страницу
2)Сам плавный скролл к этому элементу

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

Код меню

<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>

Код скрипта

jQuery(function ($) {
$('a[href^="#"]').live('click', function (e) {
          var attrib = $(this).attr('href');
          if(attrib == "#" || $("div").is(attrib)){}//проверка есть ли данный элемент на странице
                                                    //если есть, то скролить к нему
          else {    //в случае если его нету, определить на какой языковой версии страници мы находисчя
            var loc = document.location.toString().substring(19, 21);//определение страницы
              if (loc == 'ru') {// и вот здесь нужно решить то, о чём я писал
                     });
               } else {
             }
            //var target = window.location + attrib;
            window.location.hash = page + attrib;
            var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
            $('html, body').animate({
                    scrollTop: target_offset - customoffset
                },500, function () {
                    // возыращаем хеш
                  window.location.hash = '';
                });
          }   //в случае если элемент есть на странице, скролить к нему
          e.preventDefault();
          var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
          var customoffset = 75;
          $('html, body').animate({
            scrollTop:target_offset - customoffset}, 500);
          })

Так же имеется код, из предыдущих вопросов

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(){

            });
        });

    });

Answer 1

[Ro37A]

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

Update:
Можно использовать History API для удаления якоря, единственное ограничение - поддержка HTML5, соответственно IE10+.

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


        $("#.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(){

            });
        });

    });

Comments

[seregindev]

Извините пожалуйста, дело в том, что я ещё плохо знаю js
И по сути это мой 2й скрипт в жизни.
Не могли бы вы пожалуйста описать данный алгоритм по подробнее ?

[Ro37A]

seregindev: Я если честно вам херню ответил. Ваш код тоже должен сработать, если убрать window.location.hash = target;

[Ro37A]

seregindev: Если вас будет раздражать # в адресной строке, то вместо
window.location.hash = "";
можете использовать History API

history.replaceState("", document.title, window.location.pathname + window.location.search);