CODEWITHSUNDEEP
javascriptphpjqueryscrollhref
Mia Raunegger
Mia Raunegger

Reputation: 211

Preventing on click to move to top

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.

Upvotes: 0

Views: 152

Answers (2)

user8733157
user8733157

Reputation:

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.

Upvotes: 0

frisk
frisk

Reputation: 75

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>

Upvotes: 1

Related Questions