How to prevent scrolling caused by clicking a link with the #-Extension (in PHP)

Question

At first: I'm working with HTML and PHP, so please no tips for js. I built a website that shows some data. It's much longer than one screen size, so i created a href=" #down" and href=" #up" link at the beginning and end of the page with the corresponding div-containers (with the ID #up and #down). At the end of the page, I also have some buttons like show temperature (for example). These buttons are linked to a post function that reads and echos the temperature at the top of the website. But: if I clicked on the down-link, there is an extension at the web address like "../index.php#down". So when i click the "show temperature" button, it displays the temperature at the top, but the website is still scrolled down because of this hashtag. Before I added them, I had to scroll down all the time, but at least the presentation jumped to the top again when I clicked the Button. I know there are some solutions with JS, but I have the question, if it is possible to remove the "#down"-extension by clicking the $post-linked Button (either while clicking the Button or in the executed post-function). Thanks a lot :)!

Edit:

Added my code:

<html> Header, Title, etc.
 <?php
 echo '<br><a href="#down">&#8595; Scoll down &#8595;</a></p>';
 if (isset($_POST['tempNow']))
    {
         echo '<p>The temperatuere right now is: [<span style="color:Tomato">';
         echo shell_exec('head -n 1 /sys/class/thermal/thermal_zone0/temp | xargs -I{} awk "BEGIN {printf \"%.2f\n\", {}/1000}"');
    echo ' C</span>], Systemtime: ' . shell_exec('date');
    echo '.</p>';
    }?>



*** LONG LISTE OF DATA ON THE WEBSIDE***
<form method="post">
   <p>


    <button name="tempNow">Show temp. right now</button>

</p>

</form>

<a href="#">&#8593; Scroll up &#8593;</a>
<div id="down"></div>
</body>
</html>

Does this help? When i click to the Scroll-Down, it adds "#down" to my URL. Now, when i am clicking the button, it reloads, adds the Temperature at the top, but because there is still "#down" added to the URL, the view stays scrolled down at the bottom of the webside.

ps.: Maybe i have to mention: for scrolling up, its enough to add a "#" in the href. But i guess you all allready know that.

Buttons don't do anything (excluding submit buttons) without script. Maybe you have links, i.e. `a` elements? Also, instead of describing your code only, you could post the code itself to the question, that would be much easier to understand. — Teemu, Jan 27 '22 at 15:51
Please share more details, like the code involved. Also, how are PHP and CSS related to this? — Nico Haase, Jan 27 '22 at 15:54
You should probably title the question based on the actual problem you have, not the thing you believe to be its cause. Sounds like a case of [XY problem](https://meta.stackexchange.com/a/66378/302323) — Domino, Jan 27 '22 at 15:56
I cant edit the Question, dont know why, so i have to add the code down below, i hope it helps. I tried to find the right title, i also allready did some research but cant find a solution to this problem. — Oscar Donnerstag, Jan 27 '22 at 16:06
And yeah, sorry, should be named: how to remove...., sorry! cant change it right know, dk why. — Oscar Donnerstag, Jan 27 '22 at 16:12
"I cant edit the Question" - what does that mean? You were able to add the information to the question that you could not edit it, so why not add all the rest? — Nico Haase, Jan 27 '22 at 16:29
i found hte error: i had to accept an editing from another person first but it didn´t show this option to me, now it works, i will edit and reup clearer later — Oscar Donnerstag, Jan 27 '22 at 16:36

steven7mwesigwa · Answer 1 · 2022-01-27T17:25:23.950

1

So when i click the "show temperature"-button, it displays the temperature at the top, but the webside is still scrolled down because of this hashtag

To avoid the website from scrolling down when you click the "Show temperature" button, wrap the button in a hyperlink with the id attribute similar to the button itself.

<a href="#show-temp"><button name="tempNow" id="show-temp">Show temp. right now</button></a>

Addendum

If the "show temperature" button is submitting a form, this may be interesting to you:

Submit form without page reloading

edited Jan 27 '22 at 17:25

answered Jan 27 '22 at 16:05

steven7mwesigwa

5,701
3
20
34

I tried to do this, but id did not work, either it only activates the [a href] (when wrapped in between the button) or it only executed the button... – Oscar Donnerstag Jan 27 '22 at 16:08
@OscarDonnerstag if you want to prevent scrolling say that, was hard to decode your question ;-) (my deleted answer shows how to modify URL, each time hash-link is clicked, but did not prevent scrolling) – Top-Master Jan 27 '22 at 16:38
@OscarDonnerstag Try some of the solutions in the resource link of my answer. – steven7mwesigwa Jan 27 '22 at 17:33

How to prevent scrolling caused by clicking a link with the #-Extension (in PHP)

Edit:

1 Answers1

Addendum