Animated scroll / show hidden element using jQuery

Question

There are several questions around similar to this and I have tried all suggestions, to no avail.

I have a text area and a button. The button is initially hidden, but when the user types anything the button is shown.

In addition to this I want to scroll the page so that the button becomes visible. Example:

$(document).ready(function () {

    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $(window).scrollTop($('#AddCommentButton').position().bottom);
            //$("html, body").animate({ scrollTop: $(document).height() }, 1000);
        } else {
            $('#AddCommentButton').hide();
        }
    });
});

http://jsfiddle.net/sJQcM/

EDIT: better example - I need to scroll a parent element, not the page:

http://jsfiddle.net/sJQcM/3/

The button is shown before I scroll. I got it working here: jsfiddle.net/sJQcM/4. This is enough but it won't work if the button isn't the bottom element. — Kev
– Kev, Commented Jun 17, 2013 at 14:39

Spokey · Accepted Answer · 2013-06-17 14:07:07Z

3

$(document).ready(function () {
    $('#AddCommentEntryBox').on('keyup', function (e) {
        if ($(this).val() !== '') {
            $('#AddCommentButton').show();
            $('html, body').stop().animate({scrollTop:$('#AddCommentButton').offset().top})
        } else {
            $('#AddCommentButton').hide();
        }
    });
});

FIDDLE

You may want to exclude the backspace from this.

Your example may have also worked, the reason it didn't is because .position() gives only .top or .left. Bottom is not given (you have to calculate it yourself).

You can also use .animate() with scrollTop for smooth scrolling. In addition I recommend you wait for the user to stop typing for a few seconds before scrolling, otherwise it will scroll down and the textarea will be only partially visible.

edited Jun 17, 2013 at 14:07

answered Jun 17, 2013 at 14:01

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kev Over a year ago

Thanks :) Why did you change position() to offset()?

Spokey Over a year ago

as you can see here in the console the offset() gives you the position of the element in proportion to the window, while position() gives the position of the element in it's parent (a little different although here not so much, use whichever fits you better)

Kev Over a year ago

Hmm it doesn't quite work in my situation. In my page the body has overflow: hidden. I have a MainSection element that I need to scroll. At a minimum I need to simply scroll the parent div to the bottom. See edit.

Kev Over a year ago

I marked this as the answer. The technique is correct - now I just have to work on the scroll calculations specific to my page.

Collectives™ on Stack Overflow

Animated scroll / show hidden element using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related