how to disable auto scrolling when going to a section using anchor links?

1
votes

I made these vertical tabs using HTML + CSS only (because I'm challenging myself not to use ANY SCRIPTING AT ALL). It works but I can't disable the automatic scrolling when I open a section and click on a different section.

I know it's a natural behavior to jump on a different section when using anchor links, but I want to disable this so it would look like normal vertical tabs with scripts on it.

Here's my CodePen for this. https://codepen.io/bosskeito/pen/qBXzdpX

.cstmTabTargetVertical:not(:target) {
  display: none;
}

.cstmTabTargetVertical:target {
  display: block;
}

.cstmTabBtn {
  border-radius: 0 !important;
}

.cstmTabVertical .cstmTabBtn {
  width: 100%;
}

.cstmTabTargetVertical:before {
  content: "";
  display: block;
  height: 100px;
  margin: -100px 0 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-grid.min.css" integrity="sha512-Xj2sd25G+JgJYwo0cvlGWXoUekbLg5WvW+VbItCMdXrDoZRWcS/d40ieFHu77vP0dF5PK+cX6TIp+DsPfZomhw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap-reboot.min.css" integrity="sha512-ioOlrrQQ3fZN/A7N2rZVm6JXp/Lg7xtda9OaRKornjBcuTW/UqIhTlPyngcGQGrQTOhJgmSltKM4v3Ne03WPug==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="dFullWidth">
  <div class="row">
    <div class="col-lg-12 px-0 dBGLightGray">
      <div class="container-fluid px-0">
        <div class="dContainer1270">
          <div class="row mx-auto cstmMobileNarrow">
            <div class="col-md-12 my-3">
              <p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 1</p>
            </div>
            <div class="col-md-2 cstmTabVertical">
              <a href="#GSI_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2021</p>
              </a>
              <a href="#GSI_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2020</p>
              </a>
            </div>
            <div class="col-md-10">
              <div class="cstmTabTargetVertical" id="GSI_2021">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cstmTabTargetVertical" id="GSI_2020">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="dFullWidth">
  <div class="row">
    <div class="col-lg-12 px-0 dBGLightGray">
      <div class="container-fluid px-0">
        <div class="dContainer1270 py-5">
          <div class="row mx-auto py-5 cstmMobileNarrow">
            <div class="col-md-12 my-3">
              <p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 2</p>
            </div>
            <div class="col-md-2 cstmTabVertical">
              <a href="#GSA_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2021</p>
              </a>
              <a href="#GSA_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2020</p>
              </a>
            </div>
            <div class="col-md-10">
              <div class="cstmTabTargetVertical" id="GSA_2021">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cstmTabTargetVertical" id="GSA_2020">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="dFullWidth">
  <div class="row">
    <div class="col-lg-12 px-0 dBGLightGray">
      <div class="container-fluid px-0">
        <div class="dContainer1270">
          <div class="row mx-auto cstmMobileNarrow">
            <div class="col-md-12 my-3">
              <p class="dh2 dFontDarkGray mb-0 pb-4">General Information Sheet 3</p>
            </div>
            <div class="col-md-2 cstmTabVertical">
              <a href="#GSB_2021" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2021</p>
              </a>
              <a href="#GSB_2020" class="cstmTabBtn mb-2 animButtonSlide animSlideLeft animHover dButtonWhite">
                <p class="dh5 mb-0 dFontOrange animHover">2020</p>
              </a>
            </div>
            <div class="col-md-10">
              <div class="cstmTabTargetVertical" id="GSB_2021">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2021</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 1</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cstmTabTargetVertical" id="GSB_2020">
                <div class="row container-fluid px-3">
                  <div class="col-lg-12">
                    <p class="dh2 dFontDarkGray pb-4 mb-0">2020</p>
                  </div>
                  <div class="col-md-6">
                    <div class="row container-fluid px-0">
                      <div class="col-md-12 py-3 px-0">
                        <div class="row cstmMobileNarrow">
                          <div class="col-md">
                            <p class="m-0 dh5"><a class="dLinkOrange animHover" href="https://www.facebook.com/" target="_blank">placeholder link 2</a></p>
                            <p class="m-0 dp">November 18, 2021</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
htmlcsstwitter-bootstrapscroll
Old hacky way : you can use an anchor and set it in fixed position , jsfiddle.net/5hdw1ygL – G-Cyrillus