1

On this page, I have a chat bot that responds to a user's text input. I'm using the below code to append the chat bot's response onto the page as a <p> tag.

This code is also supposed to scroll the page to the bottom of the window as new <p> tags are appended, but it is not working correctly. After getting a few responses from the bot, the input box goes below the fold and there is no auto scroll; however, if I then scroll to the bottom and start typing to the bot again, it begins to auto scroll.

I adapted this code from another answer here. Any ideas what the issue is?

function jumpToPageBottom() {
  $('html, body').scrollTop( $(document).height()-$(window).height());
  console.log( "Document:" + $(document).height() );
  console.log( "Window:" + $(window).height() );
}

function isAtBottom() {
  console.log($(window).scrollTop() + " and " + $(window).height() + " equals " + $(document).height() + "?")
  return $(window).scrollTop() + $(window).height() === $(document).height();
}

function respond(val) {
  var wasAtBottom = isAtBottom();
  console.log("Was at Bottom: " + wasAtBottom);
  if (val == "") {
    val = messageSorry;
  }

  $(".chatter").append("<p class='chatresponse'>" + val + "</p>");
  console.log("Response Added");

  if (wasAtBottom) {
    jumpToPageBottom();
  }
}
Community
  • 1
  • 1
user994585
  • 661
  • 3
  • 13
  • 28
  • Looks like its working for me: https://jsfiddle.net/62ee4L0x/ – jisoo shin May 17 '17 at 02:36
  • Thanks @zwankie - seems the issue has to do with $(document).height() never changing on my link like it does on jsfiddle. Its always matches $(window).height() and so the scroll never happens. – user994585 May 17 '17 at 02:42

0 Answers0