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

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.

javascriptphphtmlcss


Solution 1:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions