0

Been searching for a solution of my problem with preventing my page to scroll to top when clicking on a link. I have this sidebar further down on my site and every time you click on a link the page moves to top. This is the sidenav:

<ul class="sidenav" <?php if(isset($p)) echo "id='".strip_tags($p)."'"; ?>>
 <li id="a"><a href="?p=a">A</a></li>
 <li id="b"><a href="?p=b">B</a></li>
 <li id="c"><a href="?p=c">C</a></li>
</ul>

I'm using jquery-1.11.3.min.js and bootstrap-3.3.7.js. Could it be any conflicts there why it scrolls to top and what should I do to prevent this? I've seen some solutions with #! and similar but it also prevents the links to load and I don't want that to happen.

Mia Raunegger
  • 221
  • 1
  • 2
  • 13
  • 1
    Does it scroll or the pages is being refreshed? – Ali Sheikhpour Apr 05 '18 at 09:46
  • 2
    use a hash on your link? eg `?p=c#id-of-element-to-jump-to` or use ajax – Pete Apr 05 '18 at 09:46
  • Give an example for $p. I think it could be invalid for the use as id. If the id klicked is not found it will jump to top. – Bernhard Apr 05 '18 at 09:47
  • Not sure what you mean, but when a page loads using an `a` link, the browser loads itself all over again, which results in it start from the top. Now, after the new page been loaded, you wan't it to scroll down to that _sidenav_ again? – Asons Apr 05 '18 at 09:53
  • @Bernhard The link is not invalid - it loads perfectly. I wnat it to stay where it is and not scroll up to top. – Mia Raunegger Apr 05 '18 at 12:40
  • @Pete I tried the #id... but that gave also strange results; the page moved up first and then back to #id very quickly - not so pretty. I guess I have to try with ajax – Mia Raunegger Apr 05 '18 at 12:44
  • @LGSon Not scroll down - I want it to stay there. – Mia Raunegger Apr 05 '18 at 12:45
  • @MiaRaunegger You'll as mentioned need AJAX for that. Also, as that is standard behavior, no one is gonna think it looks strange. – Asons Apr 05 '18 at 12:49

2 Answers2

1

Unfortunaly clicking on that href=?p=a you are actualy make a GET call with parameters, so the page will be refreshed.

You can save the information about your vertical position document.documentElement.scrollTop in the sessionStorage and use that to reset the old position when page is refreshed.

Example:

...
<script> 
$( document ).ready(function(){
  var verticalPos=sessionStorage.getItem("verticalPos");
  if (verticalPos)
    document.documentElement.scrollTop=verticalPos;
 });

function savePos(){
  sessionStorage.setItem('verticalPos', document.documentElement.scrollTop);
  return true;
}
</script>
...

 <li id="a"><a href="?p=a" onclick="javascript:savePos()">A</a></li>
frisk
  • 75
  • 1
  • 10
  • Great, that solved the position. It stays in place. But the top still flashes half a second or so before the page has loaded. – Mia Raunegger Apr 05 '18 at 10:29
  • you cannot change that, at least you fallow the @Pete advice: using ajax. Using Ajax you can retrive the parte of page chanded and replace it in the actual page without refreshing nothing and avoing the scroll problem – frisk Apr 05 '18 at 10:35
0

i would suggest instead of using get parameters if you want an asynchronous loading to use an ajax call. this if done right will only load what you want it to load when clicked on your link.

so how it will work is you have your main page where everything is loaded into

|                                    |
| Header                             |
|------------------------------------|
|                                    |
|                                    |
|    Link1  Link2  link3             |
|   _______________________________  |
|  |                               | |
|  |       this is where           | |
|  |     content is loaded         | |
|  |            in                 | |
|  |                               | |
|  |                               | |
|  |                               | |
|  |_______________________________| |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|____________________________________|

when you click each link the server will send back "data" this can be html or JSON data that you can then render into that section you want to load.