JQuery: How to scroll down to an element that's just been displayed with .show()

Question

This is for a multiple-choice quiz I'm building in a program called Shortstack. The code I'm using displays the answer below the question when a choice is clicked, but I can't get it to nudge the page up to actually show the answer on the page - the only way you know it appears is by scrolling down, but I'd like it to do that automatically.

Here's the code I'm working with:

$(document).ready(function()
{
    $(".quiz-choice").click(function ()
    {
        $(".answer-text").show();
    });
});

I found a few solutions which suggested:

$('.answer-text').offset().top = $('.answer-text').offset().top + 5;
and
$(".answer-text").scrollTop();

so I tried placing each of them (at different times) after .show(), but they made no difference.

I'm not really sure what else to try - it feels like it should be a simple thing to do but this is the first time I've tried doing anything with JQuery so I don't know all the functions etc. Thanks in advance for any suggestions!

I believe `.show()` has an optional callback parameter, if you're trying to get it to happen after the animation. As for the scroll itself, this has been answered in depth here: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element — DBS, Oct 24 '18 at 16:26
@DBS There's no animation in the `.show()` call, so the callback can't be used. — Barmar, Oct 24 '18 at 16:54

score 0 · Accepted Answer · answered Oct 24 '18 at 16:35

Have you tried using this

$(document).ready(function(){
     $(".quiz-choice").click(function () {
       $(".answer-text").show({
          complete: function() {
           $('html,body').animate({scrollTop: $('.answer-text').offset().top},500)
          }
       });
    });
});

JQuery: How to scroll down to an element that's just been displayed with .show()

1 Answers1