Combining goToByScroll with opening SPRY Accordion from external link

[davidrk]

I'm trying to combine the functionality of opening a SPRY accordion from a menu with a goToByScroll function to elevate an accordion panel to the top of the page when the menu item is selected. When the link is clicked the accordion panel opens, however it doesn't elevate to the top of the browser page.

Here is an example of the link script being used:

<a href="ghana.html?panel=ghana1#ghana_anchor1" onClick="goToByScroll('ghana_anchor1')">

Here is the goToByScroll script:

<script>
function goToByScroll(id){
        $('html,body').stop().animate
({scrollTop: $("#"+id).offset().top},'slow');
}
</script>

Here is a working page: http://www.davidkneale.com/wcusa/tanzania.html The menu down the left hand side is what I'm trying to use to open up accordions on different pages and scroll to the open accordion.

Does anyone have any advice as to how to get this to work?

[calonice]

Can you be more specific about what isn't working? I tried in Chrome and IE9-as-8. Things are being animated. The very last panel isn't elevated to the top because there's no more room for the browser to scroll below it.

[davidrk]

Thanks for the reply. If the accordion panels on the page are clicked on, they scroll to the top of the page as required. If the vertical menu down the left hand side of the page is used to open an accordion, the 'goToByScroll' is ignored, and it only scrolls down a small amount. If i remove the 'goToByScroll' portion of the link, and leave

a href="morocco.html?panel=morocco3#morocco_anchor3"

the result is the same, so I believe that this link is deactivating the

onClick="goToByScroll('morocco_anchor3')"

.

[calonice]

Ah, yes, that's exactly what's happening. It's not the prettiest fix, but here's something quick you can do:

1. Prevent the default click action, and send the link's `href` to your function.

Change your onclick handler to the following:

<a href="..." onClick="goToByScroll('morocco_achor3', '...'); return false">

2. Change your 'goToByScroll' function to redirect the window when the animation is done.

Add a function to your `animate` method (and don't forget that you're now passing two arguments to `goToByScroll`):

function goToByScroll(id, where_to){
    $('html,body').stop().animate({scrollTop: $("#"+id).offset().top},'slow', function () {
        window.location = where_to;
    });
}

[davidrk]

Sorry, pretty sure I'm missing something as it's now opening an 'undefined' page when I click on the accordion, and still not scrolling the open panel to the top of the page when the panel is opened via the menu.

I modified the menu links to

<li><a href="?panel=tanzania1#tanzania_anchor1" onClick="goToByScroll('tanzania_anchor1','?panel=tanzania1#tanzania_anchor1'); return false">14 day Trek</a></li>

and replaced the existing 'goToByScroll' with your suggested alteration.

Bit of a novice with this, so apologies for the misunderstanding.