0

I came to dead end. I'm working on horizontal scroll page. I use this code for my main menu navigation to scroll fluent between page tags. Like here

$('ul.menu a').bind('click',function(event){
    var $anchor = $menuLink;
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, time);

        $('ul.menu a').each(function(){
            $this = $(this);
            $this.removeClass('active');
        });
        $anchor.addClass('active');
    });

also I have CSS animation on page's intro which hide some elements on page load. But i need those elements when page is refreshed and intro should load only for first page load. I was figured out if I add some code after click main menu navigation link event

window.location.hash = $(this).attr("href");

and when page is will refreshed it will check current hash on url and then load css animation or not because of if statement depend of hash.

But then page can't animate fluent horizontally between the tag pages . Page is refreshing because of changing hash in url.

Is it clear? Any idea? Problem was start because of this css animation. I hide main menu at the beginning and show it up after a few seconds of animation. And this is making all the time after page refresh. I was thinking to use cookies for this too but I think it's risky because if user won't agreed for cookies then animation will start every page's reload and this will cause hiding of main navigation.

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
Marta P
  • 1

1 Answers1

0

Sample code you are looking for is:

window.history.pushState("object or string", "Title", "/new-url");

For more information refer to link Updating address bar with new URL without hash or reloading the page

Community
  • 1
  • 1
movingSone
  • 34
  • 3