4

I'm having a problem with a slidetoggle link which appears at the bottom of my page. Effectively I want the user to click to show/hide the hidden div (which works fine)

The problem is the page doesn't scroll down to show the now, not hidden div

As a JQuery novice, is there any way to toggle the div and then center it on the page? Or at least scroll down, without things getting too complicated?

Thanks

Andre
  • 41
  • 1
  • 2

1 Answers1

1

To perform this function, I'd recommend using a callback from your slideToggle call to set the document scroll using the scrollTop function. You'll be able to determine the value to the scrollTop setter by using offset to get the top position of the toggled container relative to the page. I'd suggest restricting the scroll behavior to only fire when the element is shown, not hidden.

In general, directly setting page scroll can be a slightly jarring UX. For that reason I'm actually going to give you code that animates scrollTop rather than straight up sets it using the scrollTop function, but this approach is not necessary as a direct call to scrollTop will equally position the page. I just think as a user I'd rather see a gradual scroll rather than a sudden positional change.

The code, for instance, would take the form:

$(".myShowHideLink").click(function() {
    $(".myToggleContainer").slideToggle("slow", function() {
        if ($(this).is(":visible")) {
            $(document).animate({
                scrollTop: $(this).offset().top
            }, "slow")
        }
    });
});

You may want to actually use $(this).offset().top - 50 or something similar so the scroll's set just a few pixels above the top of the container, but that's up to you. I find I don't like my elements to be butting up against the top border of the window.

I apologize I haven't created a test case for this as I'm shooting from the hip, but if it doesn't work as advertised, let me know and I'll adjust the code.

lsuarez
  • 4,952
  • 1
  • 29
  • 51
  • Hi thanks for your reply, I don't think my coding is yet at a point to fully understand how to implement your code but it does look like what I'm trying to get to! For now I've sort of got the desired effect with the following $(function(){ $("#showMoreLink").click(function(){ $("#moreText").slideToggle(800); $('html, body').animate({scrollTop:1290}, 1200); return false; }); But it's not ideal as it involved playing around with the height value. When I try your code it the page doesn't scroll down, perhaps I'm implementing it wrong? Thanks again }); – Andre Apr 14 '11 at 08:58
  • You're missing a call to offset to get the element's top as the position to scroll to. Try the following: `$(document).animate({scrollTop: $("#moreText").offset().top}, 1200)`. – lsuarez Apr 14 '11 at 14:26
  • 1
    Actually it looks like an animate call to "body" rather than document might work a bit better. [Here's a demo](http://jsfiddle.net/lthibodeaux/pE9hu/) with a slight change to make the scroll animate happen simultaneously with the slideToggle. – lsuarez Apr 14 '11 at 14:45