Search code examples
javascripthtmlcssrefreshreload

Website scrolls to top on reload in swift webview HTML CSS

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>
Solution

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