question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with Tabs Jumping Scroll Position

See original GitHub issue

Hi, I’ve set up some materialze tabs, when I click on each of the tabs it’s jumping the scroll position of the page upwards as if it’s got a page anchor on it. (See Screen Gif below).

tabs

Does anyone know whats happened here? This is my tab code…

<div class="row">
  <div class="col s12">
    <ul class="tabs bhivetabs"><li class="tab col s4"><a class="active" href="#tablets" target="_blank">Tablets and Capsules</a></li><li class="tab col s4"><a href="#drugs" target="_blank">Controlled Drug Liquids</a></li><li class="tab col s4"><a href="#amps" target="_blank">Ampoules</a></li>
    </ul>
  </div>
  <div class="col s12" id="tablets">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1256|entity_type=node|render=link|field=field_image|text=Tablet Flow Chart|target=_blank|delta=0|item_type=image|alt=Tablet Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
  <div class="col s12" id="drugs">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1257|entity_type=node|render=link|field=field_image|text=Liquid Flow Chart|target=_blank|delta=0|item_type=image|alt=Liquid Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
  <div class="col s12" id="amps">
    <p>[ciscode|rev=1|tool=elmsmedia|item=1258|entity_type=node|render=link|field=field_image|text=Ampoule Flow Chart|target=_blank|delta=0|item_type=image|alt=Ampoule Flow Chart|width=933|height=489]&nbsp;
    </p>
  </div>
</div>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
johann-abrahamcommented, Dec 2, 2016

For anyone stuck with this issue right now, the quick workaround is to just add some content beneath the tabs, take a look at this codepen which doesn’t jump: http://codepen.io/johann_abraham/pen/aBErGQ

A nice footer will probably do the trick.

I’m hoping to have some time this weekend to figure out exactly what’s going on but the above is a workaround for now.

1reaction
johann-abrahamcommented, Nov 30, 2016

hi @tomscholz, I encountered the same issue as @Anthall, I made a codepen that shows the problem here: http://codepen.io/johann_abraham/pen/yVPJme

If you scroll all the way to the bottom and then change tabs you’ll see the browser window jumps up.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fix Automatic Page Scroll Jumping on Chrome for ... - Gtricks
When you start reading the article before the webpage has completely loaded, it can jump scrolls where the content position moves because of...
Read more >
Browser scroll position is changed when tab is changed - Telerik
When I do, and select a tab to open, the scroll position is changed, it scrolls up as soon as the tab is...
Read more >
JQuery UI Tabs Causing Screen to "Jump" - Stack Overflow
I am having the same problem, where the page scroll jumps back to the top with every click. I found this in the...
Read more >
How to solve a scrolling misbehavior after doing Alt+Tab?
for example, if you scroll up in a window a little, then go to the other one and start scrolling, the bar jumps...
Read more >
textarea scroll position "jumps" once eratically when hitting Enter
Tested the issue on reported chrome version #73.0.3683.75 and latest stable #76.0.3809.132 using Ubuntu 18.04 by following steps as per comment#0.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found