CODEWITHSUNDEEP
javascriptjqueryviewportscrollto
user1854236
user1854236

Reputation: 456

Scroll when div content is outside viewport

I've got a simple piece of code like this

http://jsfiddle.net/QTa2c/

and all I want is, when user click on some of the last elements in list to show the content, 

$('a.showMeThis').click(function() {
   $(this).next('.content').slideToggle('fast', function() {
       // there's go all the magic
   });
});

and it goes outside the viewport (partly or completely) - scroll of the height of div, so he can see all of the content.

I was looking a lot for some logic for this, playing around with position().top, window.innerHeight and more, but it never goes in the way I want…

Hope you guys will help me, take care and have a nice day!

Upvotes: 0

Views: 1644

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use .animate() and .offset()

$('a.showMeThis').click(function () {
    var $this = $(this);
    $this.next('.content').slideToggle('fast', function () {
        $('html,body').animate({
            scrollTop: $this.offset().top
        }, 'slow');
    });
});

Fiddle Demo

Updated after OP's comment

Updated Fiddle Demo

$('a.showMeThis').click(function () {
    var $this = $(this);
    $this.next('.content').slideToggle('fast', function () {
        if ($this.position()) {
            if ($this.position().top + $this.height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight)) {
                $('html,body').animate({
                    scrollTop: $this.position().top - (window.innerHeight || document.documentElement.clientHeight) + $this.height() + 15 + $this.next('.content').height()
                }, 100);
            }
        }
    });
});

Upvotes: 4

ProdoElmit
ProdoElmit

Reputation: 1067

With condition it looks like this: http://jsfiddle.net/QTa2c/1/ 

if ($(this).parent().offset().top + $(this).height() > window.innerHeight + $(window).scrollTop())
          {
              var a = $(this)
              $('html,body').animate({scrollTop: $(a).parent().offset().top})
          }

I think, this code is enough to understand the logic =)

UPD: note, that you should insert return false; into .click event to prevent jumping to # anchor.

Upvotes: 2

Related Questions