Website scrolls to top on reload in swift webview HTML CSS

Question

I am developing a website but it scrolls to the top when it is reloaded. Is there any way to prevent this from happening as it is making it harder for the user to use. Thanks for any help in advance!

Code:

<head>
    <title class="noselect">My Website!</title>
</head>
<header>
</header>

<body id='main' class="noselect">
<table class="noselect">
    <p>Test {{ test }}</p>
    <p>Test {{ test1 }}</p>
    <thead>
        <tr>
          <th scope="col">Store</th>
          <th scope="col">Price</th>
          <th scope="col">Add</th>
          <th scope="col">Remove</th>
        </tr>
      </thead>
    <tbody>
        <tr>
            <th><form action="{{ path }}" method="post"><button id='addButton'></button><input type="hidden" name="sender" value="add"></input><input type="hidden" name="name" value="{{ item }}"></input></form></th>
            <th scope="row">{{ quantity[item] }}</th>
            <th id="highlighted">{{ item }}</th>
            <th><form action="{{ path }}" method="post"><button id='removeButton'></button><input type="hidden" name="sender" value="remove"></input><input type="hidden" name="name" value="{{ item }}"></input></form></th>

        </tr>
        <tr>
            <th><form action="{{ path }}" method="post"><button id='addButton' disabled></button><input type="hidden" name="sender" value="add"></input><input type="hidden" name="name" value="{{ item }}"></input></form></th>
            <th scope="row">{{ quantity[item] }}</th>
            <th id="unhighlighted">{{ item }}</th>
            <th><form action="{{ path }}" method="post"><button id='removeButton'></button><input type="hidden" name="sender" value="remove"></input><input type="hidden" name="name" value="{{ item }}"></input></form></th>
        </tr>
</table>
</body>

https://stackoverflow.com/questions/7035331/prevent-automatic-browser-scroll-on-refresh This might help you find the perfect answer for you here. — Crystal, Apr 30 '22 at 18:11
are you trying to just do one or tw pages or you wnat the entire website to be acting like that? — Crystal, Apr 30 '22 at 18:18
cool I add the answer below please accept and check it so your case is close. — Crystal, Apr 30 '22 at 18:28

score 1 · Accepted Answer · answered Apr 30 '22 at 18:27

Heres your choices to prevent that.

//one way is this

$(window).on('beforeunload', function() {
    $(window).scrollTop(0);
});


//Reset scroll top 

    history.scrollRestoration = "manual"

    $(window).on('beforeunload', function(){
          $(window).scrollTop(0);
    });
    
    
//JS 

window.onunload = function(){ window.scrollTo(0,0); }


// Other way

$(document).ready(function() {
var url = window.location.href;
console.log(url);
if( url.indexOf('#') < 0 ) {
    window.location.replace(url + "#");
} else {
    window.location.replace(url);
}

//another one

    var objDiv = document.getElementById("your id");
if ( window.history.replaceState ) {
  objDiv.scrollTop = objDiv.scrollHeight;

    window.history.replaceState( null, null, window.location.href );
}

score 0 · Answer 2 · edited May 01 '22 at 22:10

0

var objDiv = document.getElementById("your id");
if ( window.history.replaceState ) {
  objDiv.scrollTop = objDiv.scrollHeight;
  window.history.replaceState( null, null, window.location.href );
}

edited May 01 '22 at 22:10

tgikf

557
4
17

answered Apr 30 '22 at 18:48

Md Nabiul Bashar

1

Welcome to SO! Your answer could be improved by including additional supporting information. Providing [a brief explanation of the code](https://meta.stackoverflow.com/q/392712/979052) will help OP, and future users learn. – Alicia Sykes May 02 '22 at 15:13

Website scrolls to top on reload in swift webview HTML CSS

2 Answers2