0

I'm showing 4 different tables in a "div" that has a linked list, ie the table shown changes depending on which link in the list is clicked.

When the user clicks on a link though, the page automatically scrolls down to the top of the "div". I want to disable this page movement, is there a way to do this?

Basically, I want the user to be able to choose the table they want to view but don't want the page to automatically scroll to the top of the "div".

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;">
<li style="list-style-type: none; float: left;"><a style="color: white; font-size: 100%;" href="#MB"><strong>ONE</strong></a></li>
<li style="list-style-type: none; float: left;"><a style="color: white; font-size: 100%;" href="#DS"><strong>TWO</strong></a></li>
<li style="list-style-type: none; float: left;"><a style="color: white; font-size: 100%;" href="#AF"><strong>THREE</strong></a></li>
<li style="list-style-type: none; float: left;"><a style="color: white; font-size: 100%;" href="#DT" ><strong>FOUR</strong></a></li>


<div style="width: 100%; float: right; overflow: hidden;">
<div style="white-space: nowrap;  width: 400%;">
<div id="MB" style="vertical-align:top;display: inline-block; width: 25%;">[table id=28/]</div>
<div id="DS" style="vertical-align:top;display: inline-block; width: 25%;">[table id=29/]</div>
<div id="AF" style="vertical-align:top;display: inline-block; width: 25%;">[table id=35/]</div>
<div id="DT" style="vertical-align:top;display: inline-block; width: 25%;">[table id=36/]</div>
</div>
</div>
Morts81
  • 419
  • 3
  • 13

1 Answers1

0

The easiest option here may be just to use different div IDs.

You can use Javascript to disable or override the browser's default scroll behavior.

Katherine Huang
  • 68
  • 6
  • Can you maybe provide a recommendation as to where I can get the relevant info? – Morts81 Jun 04 '17 at 07:48
  • https://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page – Katherine Huang Jun 04 '17 at 13:52
  • Thanks Katherine. I don't have any experience with JavaScript, can I just add the code into the same snippet file as my HTML code? Is there anything special for the use of JavaScript? – Morts81 Jun 05 '17 at 00:23
  • Javascript in HTML is contained in `` tags. Make sure any IDs/class names in the snippets match those on your page. Good luck! – Katherine Huang Jun 05 '17 at 21:23