# Stop scroll on tab click in Tabber module

**URL:** <https://community.hubspot.com/t/stop-scroll-on-tab-click-in-tabber-module/15146>\
**Category:** CMS Development\
**Tags:** design-manager, javascript\
**Created:** [July 5, 2019, 2:55pm UTC](https://community.hubspot.com/t/stop-scroll-on-tab-click-in-tabber-module/15146 "2019-07-05T14:55:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tommitchell](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tommitchell/32/44643_2.png) [@tommitchell](https://community.hubspot.com/u/tommitchell)\
**Post date:** [July 5, 2019, 2:55pm UTC](https://community.hubspot.com/t/stop-scroll-on-tab-click-in-tabber-module/15146/1 "2019-07-05T14:55:38Z")

</div>

Hi - I’m using the Tabber module from marketplace and am having a problem whereby clicking on a tab scrolls down to the content within it, which can be troublesome from a UX perspective. Any clues on how to prevent this please? Live page example is at [Webinars | Goodlord](https://www.goodlord.co/events)

Thanks in advance!

\<div class=“hs-tabs”\>  
\<ul class=“hs-tabs\_\_nav”\>  
{% for item in module.tab -%}  
\<li\>\<a href=“#tab-{{ loop.index }}” class=“hs-tabs\_\_navitem{% if loop.index == 1 %} hs-tabs\_\_navitem–active{% endif %}”\>{% inline\_text field=“tab\_label” value=“{{ item.tab\_label }}” %}\</a\>\</li\>  
{%- endfor %}  
\</ul\>  
{% for item in module.tab %}  
\<div id=“tab-{{ loop.index }}” class=“hs-tabs\_\_item{% if loop.index == 1 %} hs-tabs\_\_item–active{% endif %}”\>{% inline\_rich\_text field=“content” value=“{{ item.content }}” %}\</div\>  
{% endfor %}  
\</div\>

{% require\_css %}  
\<style\>  
.hs-tabs\_\_navitem:not(.hs-tabs\_\_navitem--active) {  
background-color: {{ module.tab\_bg\_color.color }};  
color: {{ module.tab\_text\_color.color }};  
}  
\</style\>  
{% end\_require\_css %}

.hs-tabs\_\_item{  
display: none;  
padding: 40px 20px 20px 20px;  
/\*border: 1px solid #efefef; \*/  
}  
.hs-tabs\_\_item--active{  
display: inline-block;  
background-color: #ffffff;

}

.hs-tabs\_\_item--active:focus {  
outline: none !important;  
}

.hs-tabs\_\_item img{  
/\* Protect images from overflowing the tab \*/  
max-width: 100%;  
height: auto;  
}  
.hs-tabs\_\_nav{  
list-style: none;  
margin: 0;  
padding: 0;  
margin-bottom: -1px;  
}  
.hs-tabs\_\_nav li{  
display: inline-block;  
}  
.hs-tabs\_\_navitem{  
text-decoration: none;  
display: block;  
padding: 20px;  
border: 1px solid #efefef;  
border-bottom: none;  
}  
.hs-tabs\_\_navitem--active{  
color: #000;  
background: #fff;  
}  
/\* fix for hubspot injected div \*/  
.hs-tabs\_\_navitem \*{  
pointer-events: none;  
}

function tabs(context){  
var nav = context.querySelector(‘.hs-tabs\_\_nav’),  
tabs = nav.querySelectorAll(‘a’),  
content = context.querySelectorAll(‘.hs-tabs\_\_item’),  
switchTabs = function(id){  
removeClassAll(content, ‘hs-tabs\_\_item--active’);  
context.querySelector(id).classList.add(‘hs-tabs\_\_item--active’);  
},  
tabEvent = function(event){  
if(event.target.nodeName == “A”){  
event.preventDefault();  
switchTabs(event.target.getAttribute(‘href’));  
removeClassAll(tabs, ‘hs-tabs\_\_navitem--active’);  
event.target.classList.add(‘hs-tabs\_\_navitem--active’);  
}  
},  
removeClassAll = function(elemArr, className){  
for(var i = elemArr.length; i--;){  
elemArr[i].classList.remove(className);  
}  
},  
init = (function(){  
nav.addEventListener(‘click’, tabEvent);  
})();  
}

var tabbers = document.querySelectorAll(‘.hs-tabs’);  
for(var i = tabbers.length; i--;){  
tabs(tabbers[i]);  
}

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [July 10, 2019, 6:54pm UTC](https://community.hubspot.com/t/stop-scroll-on-tab-click-in-tabber-module/15146/2 "2019-07-10T18:54:34Z")

</div>

@tommitchell inside of the js file “preloader.min.js” is a smooth scroll function that targets any link that starts with “#”. You should exclude the tabber tabs from the smooth scroll function and that will fix your issue. 🙂

---

<div class="post-metadata">

**Author:** ![tommitchell](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tommitchell/32/44643_2.png) [@tommitchell](https://community.hubspot.com/u/tommitchell)\
**Post date:** [July 11, 2019, 3:29pm UTC](https://community.hubspot.com/t/stop-scroll-on-tab-click-in-tabber-module/15146/3 "2019-07-11T15:29:12Z")

</div>

Brilliant - that has done the job! Thanks so much for your help Stefen.