У меня возникла проблема с гладкой привязкой ссылки, когда в первом разделе только несколько материалов, а второй виден в области просмотра, активное состояние отображается для второго якоря.

вот скрипка: https://jsfiddle.net/moviecrew/k4o275Lh/17/

Попробуйте увеличить высоту страницы результата и уменьшить.

Есть ли способ сделать первый элемент активным, если в первом разделе меньше контента?

function initAnchors() { new SmoothScroll({ anchorLinks: 'a.smooth-scroll[href^="#"]:not([href="#"])', // extraOffset: 185, extraOffset: 209, // extraOffset: 313, activeClasses: 'parent', anchorActiveClass: 'active', wheelBehavior: 'none' }); } 

Здесь страница инициализируется.

Вы можете использовать css min-height:100%:

 document.querySelectorAll('header a').forEach(ha={amp}gt;{ ha.onclick=e={amp}gt;{ document.querySelector('header li.active').classList.remove('active') e.target.closest('li').classList.add('active') } }) 
 .nav { list-style: none; display: block; width: 100%; margin: 0;padding: 0; } .nav{amp}gt;li { display: inline-block; padding: 8px; } .nav a { display: block; background: #666; padding: 5px 10px; text-decoration: none; color: #fff; border-bottom: 2px solid #666; } .nav li.active a, .nav li a:hover { background: #333; border-bottom-color: #f0f; } /* .subcontent { padding-top: 40px; } */ html { height:100%; } body { display: flex; height: 100%; flex-direction: column; margin: 0;padding: 0; } /* header { } */ main { flex-grow:1; overflow: auto; scroll-behavior: smooth; } .subcontent { min-height:100%; } 
 {amp}lt;header{amp}gt; {amp}lt;ul class="nav nav-tabs"{amp}gt; {amp}lt;li role="presentation" class="active"{amp}gt; {amp}lt;a class="nav-tab-link smooth-scroll" href="#planBenefits"{amp}gt;Plan Benefits{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li role="presentation"{amp}gt; {amp}lt;a class="nav-tab-link smooth-scroll" href="#supportDocuments"{amp}gt;Support Documents{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/header{amp}gt; {amp}lt;main{amp}gt; {amp}lt;div id="planBenefits" class="subcontent"{amp}gt; {amp}lt;h1 class="push-bot-3 text-capitalize"{amp}gt;{amp}lt;strong{amp}gt;Plan benefits{amp}lt;/strong{amp}gt;{amp}lt;/h1{amp}gt; {amp}lt;p class="push-bot-2"{amp}gt;Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.{amp}lt;/p{amp}gt; {amp}lt;p class="push-bot-2"{amp}gt;Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.{amp}lt;/p{amp}gt; {amp}lt;p class="push-bot-2"{amp}gt;Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.{amp}lt;/p{amp}gt; {amp}lt;p class="push-bot-2"{amp}gt;Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="supportDocuments" class="subcontent"{amp}gt; {amp}lt;h1 class="push-bot-3 text-capitalize"{amp}gt;{amp}lt;strong{amp}gt;Supports{amp}lt;/strong{amp}gt;{amp}lt;/h1{amp}gt; {amp}lt;p class="push-bot-2"{amp}gt;Your plan is designed to help you create wealth, protect your wealth and transfer it to your beneficiaries in a tax efficient way. The actual long-term costs and benefits of your plan will vary from the original projection when underlying long-term assumptions such as tax rates, tax laws and interest rates change.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/main{amp}gt;