Issue with Tabs Jumping Scroll Position
See original GitHub issueHi, 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).
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]
</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]
</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]
</p>
</div>
</div>
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:10 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.