0

I use some hashes in a script to scroll to differents elements of a page when the client open a page that has a trailing "#something" in its url. The problem is when the user uses the go back and for buttons of his client. How can i make the script reacting again once the client has moved back or for?

Here is the concerned portion of code:

// Arrivée avec une ancre
var $h = window.location.hash;
if ($h != '') {
    var $arrh =  {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
    $('#left').scrollTo($arrh[$h], 500);
}
else {
    $('#left').scrollTo('#panel_home', 500);
}

I hope my question is understandable... i'm french and i've just tried to explain my thought the best i can in english.

I don't know if what i'm asking is possible, but if you have an idea, your help will be welcome!

Edit-0:

've just seen a seemingly similar discussion there: Detecting Back Button/Hash Change in URL I'll read and bring back answers if i find a solution (some links proposed are really interesting).

Community
  • 1
  • 1
shtefh
  • 51
  • 5

4 Answers4

2

this css selector may be helpful:

#left:target
{
.
.
.
}
Mohammad Jafar Mashhadi
  • 4,102
  • 3
  • 29
  • 49
  • I know the target element, but i don't see how i can use it in my case... Anyway thanks for the help! – shtefh Nov 14 '12 at 23:53
1

Add this code to a function, and call that function anytime the hash changes. I'm not sure I completely understand, but from what I do, I think this should work fine for you:

var scrollFunction = function (){
    var $h = window.location.hash;
    if ($h != '') {
        var $arrh =  {'#home': '#panel_home', '#services': '#panel_services', '#realisations': '#panel_realisations', '#contact': '#panel_contact', '#about': '#panel_about' };
        $('#left').scrollTo($arrh[$h], 500);
    }
    else {
        $('#left').scrollTo('#panel_home', 500);
    }
};
window.onhashchange = scrollFunction;
Some Guy
  • 15,854
  • 10
  • 58
  • 67
  • Thanks to all of you that have answered, i'm gonna look your proposition. It finally seems it's possible to do what i asked... – shtefh Nov 14 '12 at 11:24
  • I've just tried your idea, it doesn't work as expected. My need concerns the events triggered by the user when he uses the go back and forward history buttons of his browser. And this script doesn't handle that. – shtefh Nov 14 '12 at 23:52
  • I use instead the solution proposed above by Ashwini. Thanks for your help anyway! :) – shtefh Nov 15 '12 at 00:00
1

You can also try using a jquery plugin like jquery hash-change (https://github.com/cowboy/jquery-hashchange) or jquery history (http://tkyk.github.com/jquery-history-plugin/) developed for similar requirements

Ashwini Khare
  • 1,645
  • 6
  • 20
  • 37
  • I've just tried, it doesn't work as expected. My need concerns the events triggered by the user when he uses the go back and forward history buttons of his browser. And this script doesn't handle that. – shtefh Nov 14 '12 at 23:49
0

Well, the solution that meets my need is in that plugin:

http://benalman.com/projects/jquery-hashchange-plugin/

May be it'll help someone else...

Ps: it's really easy to use; just link the script to your document and add something like:

$(window).hashchange(function(){
    my_func();
});
shtefh
  • 51
  • 5