Переход на главную страницу из дочерней?

Question

[seregindev]

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

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

jQuery(function($) { 

$('a[href*=#]').live('click',function(event){
    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);
});

}(jQuery));

Answer 1

[Сергей Горячев]

Ужс, как ты свой код понимаешь)))

Answer 2

[dmz9]

для главной

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

не для главной

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

Comments

[seregindev]

Увы но так реализовать не получится, тк у нас только 1 меню для всего сайта, которое я подключаю

[dmz9]

определи на JS местоположение главная-или-нет.
потом в обработчике клика просто пишешь
if (!mainPage){
document.location='/'+$(this).attr('href')
}
будет тоже самое

Answer 3

[ealexseen]

Можно попробовать так

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

<div id="solutions">
    
</div>
<div id="team">
    
</div>
<div id="blog">
    
</div>
<div id="contact">
    
</div>

<script>
 (function($) {
        function scrollToBlock() {
            if(window.location.pathname == '/' && window.location.hash.length) {
                var customoffset = 85;

                $('html, body').animate({
                    scrollTop: $('#' + window.location.hash.slice(1)).offset().top - customoffset
                }, 500);
            }
        }
        scrollToBlock();

        $(document).on('click', '.menu a', function(e){
            var status = (window.location.pathname == '/') ? false : true,
                self = $(this),
                selfText = self.text().toLowerCase(), // это id блоков на главной странице куда скролим
                idBox = $('#' + selfText),
                customoffset = 85;

            window.location.hash = selfText;

            if(status != false) {
                $('html, body').animate({
                    scrollTop: $(idBox).offset().top - customoffset
                }, 500);
            }

            return status;
        });

    }(jQuery));

</script>