How can I achieve "jumps" with jquery?

Question

I am developing a website that loads different pages depending on what menu icon a user clicks. A friend and I wrote this javascript function:

function loadPage(targetURL){
    $.get( targetURL, function( data ) {
    document.getElementById("placeholder").innerHTML=data;
    window.scrollTo(0,0);
    });
}

And the menu icons are coded like this:

<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage.php')"/>

It works great except if trying to jump to a particular div id. For example,

<img src="images/some_icon.png" title="Some Page" onclick="javascript:loadPage('pages/somePage#someLocationOnPage.php')"/>

Taking out the .scrollTo(0,0) doesn't solve the issue. I put that line in to ensure that the page is scrolled all the way up when changing pages (Otherwise, if you were in the middle of the page and clicked a menu icon, the new page would display in the middle of the page).

What have I missed? How can I get the link to jump to a div id?

First verify that the function is called. Use console.log or alert() or such. — andrewb, Sep 20 '13 at 05:20
`$(window).scrollTop($('#'+targetUrl.split('#')[1].split('.php')[0]).position().top);` extremly rough. — Ohgodwhy, Sep 20 '13 at 06:09

xcorat · Accepted Answer · 2013-09-20T06:48:03.860

0

The two URL's are not different. The one with the bookmark just gets the same HTML code. Since you are not telling the browser to go to a specific bookmark, it should display the same information. (Unless your server sends different info for that link, of course)

I guess you'd have to manually move the view to the bookmark you want.

function loadPage(targetURL, targetID){
    $.get( targetURL, function( data ) {
        document.getElementById("placeholder").innerHTML=data;
        if(targetID && $("#"+targetID).length != 0){
            $(document).scrollTop($("#"+targetID).offset().top);
        } 
        else {
            window.scrollTo(0,0);
        }
    });
}

And then give the ID for the target as another parameter. If that's not possible, you can also search for # in the url and find the ID/ or anchor.

edited Sep 20 '13 at 06:48

answered Sep 20 '13 at 05:21

xcorat

1,434
2
17
34

Maybe I am missing something, but this solution actually breaks my website even more. I'm pretty new to javascript, so I'm unable to find your error. And yes, I remembered to change #someLocation to the real id. :-) If I could get something as quick as this to work, I would. But is it bad practice to not have a more general solution? – I ate some tau Sep 20 '13 at 06:26
What you mean by it breaks? where does it go wrong? I fixed the closing brackets. I hope you saw that. – xcorat Sep 20 '13 at 06:46
Ah! I didn't see that fix. Yes, the other links work now, but the jumping one does not. I would use this function like right? – I ate some tau Sep 20 '13 at 06:54
break the quotes to get two parameters. and the `.php` part should go with the url. `` EDIT: also remove the `#`. – xcorat Sep 20 '13 at 06:56

score 0 · Answer 2 · answered Sep 20 '13 at 05:58

First of all you should keep the window.scrollTo(0,0) in your code to keep the page go to top on every click of menu item.

Secondly if on click of menu icon which is calling

 loadPage('pages/somePage#someLocationOnPage.php')

your intentions are to open 'somePage' and scroll to the position where element id is 'someLocationOnPage.php' then you should update your loadPage method to check for the part after '#'.

function loadPage(targetURL){
    $.get( targetURL, function( data ) {
      document.getElementById("placeholder").innerHTML=data;
      window.scrollTo(0,0);

      // Grab url part after '#'
      var name = targetURL.substr( href.indexOf('#') + 1 ), target = $('a[name='+ name +']'), target2 = $('#' + name);

      // Determine of bookmark is available or not
      target = (target.length)? target : target2;

      // Scroll to the bookmark
       $('html,body').animate({
          scrollTop: target.offset().top
       },400);
    });
}

With this solution, all the links work as expected... _except_ the one that jumps to the #. :( — I ate some tau, Sep 20 '13 at 06:23

How can I achieve "jumps" with jquery?

2 Answers2