Getting a textarea to scroll to top after contents changed in JS

JavaScript
1

I have been trying to scroll my MarkDown Previewer’s textarea to the top row when the page first loads using scrollTop but it hasn’t worked for me. I’m done with everything else except for this one annoying thing. (it shows up scrolled down, probably because I edited the innerHTML to load the initial instructions in).

If you have any ideas on how to fix that, I’d appreciate it!
My pen:

Edit: and I would probably want to scroll the whole page up as well as the text area.

1 Like
3

hi Randell,

Thanks for trying. I didn’t think about the template literal method till after I wrote all those lines down and reviewed the sample solution. I’ll have to keep it in my mind for next time.

As for the DOM, i didn’t want to play with React this time. I was just trying to do this with plain javascript. (I even stayed away from jQuery even though I was pulling it in for the marked lib)
(I’m assuming that you meant a React component when you said “using a component”)

ps. I focused on bootstrap and redux for this project. Saving react for another project…

5

What you want doesn’t really make much sense to me, but here is a shot.

The API for focusing on element is focus()

editor.focus()

But then, since there are already texts in the textarea, it will focus to the end of the text, which is bottom. So, if you want to scroll back to the top, you need scroll API.

Scrolling API for vanilla JS is .scrollTo(x, y) (there are a couple more)
So, if you add

editor.scrollTo(0, 0)

the editor will scroll to the top. But why is this important? If you do this, users won’t know that their keyboard is sitting on the textarea. If users knew this, then the textarea will scroll to the bottom as soon as they start typing because the focus has been set. So, what’s the point of giving focus to editor and scrolling the editor to the top?

As for the page, it starts from the top by default. So, I don’t see the point of adding code to scroll to the top.
Anyway, you can do this to set the page to top.

window.scrollTo(0, 0)
6

Hi there! Thanks for the response! On my browser both the page and the editor are not scrolled to the top at first load. My concern with that is the user needs to see the top of the instructions so they’ll know what to do. The sample fcc pen for eg has that behaviour (though perhaps by luck more than by design).
I’ve tried every single thing i could find to scroll the page (and textarea) and nothing has worked. I’ve even resorted to adding an internal anchor tag to try to force the page back up, but i need to finish that up still to see if it finally gets the page up to the top again or not.

7

I think presenting instruction in a textarea is a bad user experience. But, if that is some constraint that you’ve decided to use, I’m not going to interfere with it.

Have you used the code I’ve posted? .focus() might have a questionable browser compatibility, but scrollTo() is widely supported. I don’t know what your browser is, but at least scrollTo() will likely to work.

Note that scrollTop() isn’t a vanilla JS function; that is for JQuery.

8

Thanks again! I did try the suggested method and many others which include:

//editor.scroll(0, 0);
//window.scroll(0, 0);
//window.scrollY = 0;
//window.pageYOffset = 0;
instructionBtn.focus;
document.getElementById(“markdownBody”).pageYOffset = 0;
window.scrollTo(0,0);
//document.documentElement.scrollTo(0,0);
editor.scrollTo(0,0);

(all the lines including the commented out ones were things I tried).

I was thinking maybe I’m doing something wrong (like maybe I’m doing this scrollTo to the wrong element?) but I can’t imagine what at the moment. My browser is chrome but the page only shows up scrolled down when I’m in full screen mode on codepen. (on my mobile chrome it shows up at the top).

I’m thinking of just using jQuery once for the purpose of using scrollTop (assuming it works) at this point.

ps. the instructions in the text box is the design of the challenge… I added an introduction to the top of the page which wasn’t requested by the challenge because some of my friends will be totally lost when they see this page and I would like that to show up when someone loads the page. (because my friends won’t think to scroll up! :slight_smile: )

9

That must be some weird quirk in codepen, which I don’t know exactly. To really know, you should try running the code locally or temporarily host it on a github page.

If you still want to see your desired behavior happening in the codepen full page mode, then add this.

window.setTimeout(() => {
  window.scrollTo(0,0);
  editor.scrollTo(0,0);
}, 0)

Delete lines below the store.subscribe(markDown);. They aren’t doing anything.

Proof of concept: https://codepen.io/gunhoo93/pen/yxBvPK

1 Like
10

Thanks so much @gunhoo93 for taking the time to look into this! I really appreciate it.
Unfortunately I still can’t get the scroll to work (I clicked on your POC pen and everything looked the same from the scrolling perspective).
I wonder if there is something going on with my browser…

but I will use your code anyway in case it helps in my friends browsers!

Edit: actually that worked! I don’t understand why it didn’t when I clicked on the pen but when I added the code in to my pen and opened the full page up, it is definitely scrolled up properly! Thanks so much!

11

I’m using latest chrome as well. And in my environment, I can see everything is scrolled to the top on every hit of refresh button. If this isn’t the same experience as yours, then I’d say just try running the code locally and see if you can replicate the bug.

1 Like