Question

I am using the Jquery UI Tabs widget and my Tab is collapsible and starts in the collapsed state. The Tab appears at the bottom of the page on load. When the user clicks on the tab, I want the page to automatically scroll down on the page so that the tab title is now at the top of the page and the expanded tab content is in view. Right now when the user clicks the tab to expand the content, the page doesn’t scroll at all and the user cannot see the expanded content without using the scroll bar.

This is the code:

<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({
collapsible: true,
selected: -1
});
});
</script>
<div id="tabs">
<ul><li>heres my tab title</li></ul>
<div id="tab title">
tab content goes here
</div>
</div>

Thanks for any help in advance. I just want the page to autoscroll to the content kind of like an anchor. Thanks again.

Answer 1

You can try this plugin called scrollTo or use window.scrollTo(). There are a couple of others if you google scrollTo plugins via jquery. Here’s an example of how to use scrollTo.

onAfter to expand your div after.