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

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

#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.


#2

I am sorry I am unable to answer your question related to the textarea scroll issue, but I am curious about two things.

#1) Why are you directly accessing the DOM and not using a component for the editor content?

#2) Why not use a template literal for the editor default content?

You could replace all of this:

const editor = document.getElementById("editor");
editor.innerHTML = "# Marked in the browser\n\nRendered by **marked**.";
editor.innerHTML += "\n\n## Marked - Markdown Parser";
editor.innerHTML +=
  "\n\n[Marked](https://github.com/markedjs/marked/) lets you convert [Markdown] into HTML.  Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML.  This demo page will let you type anything you like and see how it gets converted.  Live.  No more waiting around.";
editor.innerHTML += "\n\nHow To Use The Demo\n-------------------";
editor.innerHTML +=
  "\n\n1. Type in stuff in the editor text area.\n2. See the live updates in the preview area.\n\n";
editor.innerHTML +=
  "> The overriding design goal for Markdown's\n> formatting syntax is to make it as readable\n";
editor.innerHTML +=
  "> as possible. The idea is that a\n> Markdown-formatted document should be\n> publishable as-is, as plain text, without\n> looking like it's been marked up with tags\n> or formatting instructions.";
editor.innerHTML += "\n\nMore examples of markdown include:";
editor.innerHTML += "\nUsing inlines with backticks like this `hi`lo`";
editor.innerHTML += "\nor using backticks to indicate code spans like this\n\n";
editor.innerHTML += "```\n";
editor.innerHTML += "    <html>\n";
editor.innerHTML += "      <body>html code here</body>\n";
editor.innerHTML += "    </html>";
editor.innerHTML += "\n```";
editor.innerHTML += "\n\n You could also include an image like this\n";
editor.innerHTML +=
  "![image](http://res.cloudinary.com/hbrwdfccc/image/upload/v1529066956/sample.jpg)";
editor.innerHTML +=
  "\n\n[Marked]: https://github.com/markedjs/marked/\n[Markdown]: http://daringfireball.net/projects/markdown/";

with a template literal like this:

const editor = document.getElementById("editor");
editor.innerHTML = `
# Marked in the browser\n\nRendered by **marked**.

## Marked - Markdown Parser

[Marked](https://github.com/markedjs/marked/) lets you convert [Markdown] into HTML.  Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML.  This demo page will let you type anything you like and see how it gets converted.  Live.  No more waiting around.

How To Use The Demo
-------------------

1. Type in stuff in the editor text area.
2. See the live updates in the preview area.

> The overriding design goal for Markdown's
> formatting syntax is to make it as readable
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.

More examples of markdown include:
Using inlines with backticks like this \`hi\`lo\`
or using backticks to indicate code spans like this

\`\`\`
    <html>
      <body>html code here</body>
    </html>
\`\`\`

You could also include an image like this
![image](http://res.cloudinary.com/hbrwdfccc/image/upload/v1529066956/sample.jpg)

[Marked]: https://github.com/markedjs/marked/\n[Markdown]: http://daringfireball.net/projects/markdown/
`;

#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…


#4

It could have been a stateless functional component, but yes I meant something React-like. Sounds like you had your reasons, but I was just curious.


#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


#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.