• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

When button clicked on ESP32 websocket webserver, how do you stop the page from jumping to the top?

Q&A Forum › Category: ESP32 › When button clicked on ESP32 websocket webserver, how do you stop the page from jumping to the top?
0 Vote Up Vote Down
Dan Haber asked 4 years ago

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!

5 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

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

0 Vote Up Vote Down
Dan Haber answered 4 years ago

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?

0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

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

0 Vote Up Vote Down
Dan Haber answered 4 years ago

Hi Sara, sorry for messing up that link. I’ve sent an email to support. Thanks!

0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

I’ve answered your question via email.

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.