How to prevent a textarea from "scrolling down" on jquery select?

Question

I am using a textarea with a jquery select function to allow my users to quickly select the full article for easy copying. The textarea is just one row tall and has the overflow set to hidden.

Whenever I click the label for my textarea it automatically 'scrolls down' to the bottom of my page. I found that this only happens when the overflow is set to hidden and I'm assuming it 'scrolls' down to the bottom of the selected text.

See example: http://www.creepypasta.org/Untitled.webm

HTML

<label for="copy-pasta">Copy Pasta</label>
<textarea rows="1" id="copy-pasta">Multiple lines of text...</textarea>

jQuery

$("#copy-pasta").click(function () {
    $(this).select();
});

CSS

.copy-pasta textarea {      
    overflow: hidden;
    resize: none;
}

Answer 1

• Store the current scroll position

• Call your copy function

• Restore scroll position