Website scrolls to top on reload in swift webview HTML CSS-CodePudding

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 >My Website!</title>
</head>
<header>
</header>

<body id='main' >
<table >
    <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>

CodePudding user response：

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 );
}

CodePudding user response：

var objDiv = document.getElementById("your id");

if ( window.history.replaceState ) { objDiv.scrollTop = objDiv.scrollHeight;

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

}