title: Prevent Chrome from jumping to the top of the page after manipulating the DOM
body: <p>I'm using Action Cable to build a discussion room in which users can ask questions to each other. Once a question is posted, all other users in the room will see it. I'm experiencing a strange problem on Chrome: when a question is posted by myself or another user, the page jumps to the top. This doesn't happen on other browsers and is quite an annoying problem. All my code does is append a small element to the DOM. Here's my controller:</p>
  
  <pre><code>class QuestionsController &lt; ApplicationController
    def create
      @question = Question.new(create_params)
  
      if @question.save
        ActionCable.server.broadcast(
          "discussion_room",
          message: {
            event_type: "new_question",
            question_id: @question.id,
            question_item: ApplicationController.render(partial: "questions/question_item", locals: { question: @question })
          }
        )
      end
  
      respond_to do |format|
        format.js
      end
    end
  
    ...
  end
  
  </code></pre>
  
  <p>Here's the JavaScript that handles the <code>new_question</code> event:</p>
  
  <pre><code>App["discussion_room"] = App.cable.subscriptions.create({ channel: "DiscussionRoomChannel", roomId: roomId },
  {
    received: function(data)
    {
      switch (data.message.event_type)
      {
        case 'new_question':
          this.newQuestionEvent(data);
  
          break;
        default:
          break;
      }
    },
  
    newQuestionEvent: function(data)
    {
      $("#questions-list").append(data.message.question_item);
      $("#questions-container").removeAttr("hidden");
    }
  });
  </code></pre>
  
  <p>While debugging, I commented out the line that appends the HTML, and sure enough, the page no longer jumps. This is not the normal behavior of jQuery's <code>append</code> method, so I'm not sure what's going on.</p>
  
  <p>What can I do to fix this issue?</p>