First of all, the eBook for building an ESP32 webserver is amazing, I’ve learned so much. I’m at a point where I’ve built a control panel with buttons that are only accessible when you scroll down the page. It would be ideal if when I clicked a button down there, the page did not automatically jump to the top. That way, I could easily click another one without having to scroll down again. Is that possible?
Thanks in advance!
Hi Dan.
What HTML elements do you have on your page?
If you have elements that interact with the server only via websocket, that doesn’t happen.
It will happen if you have HTML elements that when clicked send a request to the server.
I’ve seen this snippet suggested somewhere, but I haven’t tested it. Add it to the beginning of your JavaScript file:
window.onload = function () {
if (location.hash) {
window.scrollTo(0, 0);
}
};
More information here: https://www.w3schools.com/jsref/prop_loc_hash.asp
I hope this helps.
Regards,
Sara
Thanks for the response Sara! I tried that code you mentioned at the very top of script.js, then underneath the first few lines:
var gateway = `ws://${window.location.hostname}/ws`; var websocket; window.addEventListener('load', onload);
which unfortunately didn’t work. Then I tried adding just ” if (location.hash) window.scrollTo(0,0); ” to my function onload(), which just has initWebSocket(); but that also didn’t work. :/
As for what HTML elements I’m using, I mostly just have inputs that are checkboxes and a form with 2 number inputs. There are a couple range inputs but they are at the top. Here is a link to html-css-js.com with all my code inside, hopefully this is a good way to share my project. HTML CSS AND JS CODE
What kind of elements only interact with the websocket?
Hi Dan.
I can’t access the files. To share your files, you can share a link to google drive, pastebin or other.
If you can’t, just send an email to our support with the files.
Regards,
Sara