Scroll To Section By Section

January 29, 2023 Post a Comment

I have HTML markup: HTML:

Solution 1:

Interesting

I stole this code, changed the layout and tried to add the functions you mentioned (1. scroll-snap + 2. scroll when link is clicked). Unfortunately, I can't have this second function to work.

Adding scroll-snap is not a problem

You need scroll-snap-type: y mandatory; on the container and scroll-snap-align: start; on the sections.

var doc = window.document,
  context = doc.querySelector('.js-loop'),
  clones = context.querySelectorAll('.is-clone'),
  disableScroll = false,
  scrollHeight = 0,
  scrollPos = 0,
  clonesHeight = 0,
  i = 0;

function getScrollPos () {
  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}

function setScrollPos (pos) {
  context.scrollTop = pos;
}

function getClonesHeight () {
  clonesHeight = 0;

  for (i = 0; i < clones.length; i += 1) {
    clonesHeight = clonesHeight + clones[i].offsetHeight;
  }

  return clonesHeight;
}

function reCalc () {
  scrollPos = getScrollPos();
  scrollHeight = context.scrollHeight;
  clonesHeight = getClonesHeight();

  if (scrollPos <= 0) {
    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
  }
}

function scrollUpdate () {
  if (!disableScroll) {
    scrollPos = getScrollPos();

    if (clonesHeight + scrollPos >= scrollHeight) {
      // Scroll to the top when you’ve reached the bottom
      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
      disableScroll = true;
    } else if (scrollPos <= 0) {
      // Scroll to the bottom when you reach the top
      setScrollPos(scrollHeight - clonesHeight);
      disableScroll = true;
    }
  }

  if (disableScroll) {
    // Disable scroll-jumping for a short time to avoid flickering
    window.setTimeout(function () {
      disableScroll = false;
    }, 40);
  }
}

function init () {
  reCalc();
  
  context.addEventListener('scroll', function () {
    window.requestAnimationFrame(scrollUpdate);
  }, false);

  window.addEventListener('resize', function () {
    window.requestAnimationFrame(reCalc);
  }, false);
}

if (document.readyState !== 'loading') {
  init()
} else {
  doc.addEventListener('DOMContentLoaded', init, false)
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

section {
  position: relative;
  text-align: center;
  height: 100%;
  scroll-snap-align: start;
}

::scrollbar {
  display: none;
}


body {
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

nav ul {
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 1rem 0;
}

nav ul li{
  display: flex;
  justify-content: space-around;
}

.nav-link{
  text-decoration: none;
  color: grey
}

.one {
  background: black;
}
.two {
  background: darkblue;
}
.three {
  background: lightgreen;
}
.four {
  background: lightcoral;
}
.five {
  background: lightskyblue;
}
.six {
  background: orange;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 80px;
  letter-spacing: 5px;
  color: #fff;
  text-transform: uppercase;
}

<nav>
  <ul>
    <li><a class="nav-link" href="#one">one</a></li>
    <li><a class="nav-link" href="#two">two</a></li>
    <li><a class="nav-link" href="#three">three</a></li>
    <li><a class="nav-link" href="#four">four</a></li>
    <li><a class="nav-link" href="#five">five</a></li>
    <li><a class="nav-link" href="#six">six</a></li>
  </ul>
</nav>
<main class="Loop js-loop">
  <section class="one" id="one">
    <h1>One</h1>
  </section>
  <section class="two" id="two">
    <h1>Two</h1>
  </section>
  <section class="three" id="three">
    <h1>Three</h1>
  </section>
  <section class="four" id="four">
    <h1>Four</h1>
  </section>
  <section class="five" id="five">
    <h1>Five</h1>
  </section>
  <section class="six" id="six">
    <h1>Six</h1>
  </section>

  <!--
  These blocks are the same as the first blocks to get that looping illusion going.
  You need to add clones to fill out a full viewport height.
  -->
  <section class="one is-clone">
    <h1>One</h1>
  </section>
  <section class="two is-clone">
    <h1>Two</h1>
  </section>

</main>

Adding the scrolling when you click on the link is a problem

With a normal container you only need to add the scroll-behaviour: smooth; to it. But here if you do that, you will lose the loop illusion because you will see it scroll back to the first instead of seemingly continue. (and it will also start an infinite back and forth scrolling that I couldn't fix yet)

var doc = window.document,
  context = doc.querySelector('.js-loop'),
  clones = context.querySelectorAll('.is-clone'),
  disableScroll = false,
  scrollHeight = 0,
  scrollPos = 0,
  clonesHeight = 0,
  i = 0;

function getScrollPos () {
  return (context.pageYOffset || context.scrollTop) - (context.clientTop || 0);
}

function setScrollPos (pos) {
  context.scrollTop = pos;
}

function getClonesHeight () {
  clonesHeight = 0;

  for (i = 0; i < clones.length; i += 1) {
    clonesHeight = clonesHeight + clones[i].offsetHeight;
  }

  return clonesHeight;
}

function reCalc () {
  scrollPos = getScrollPos();
  scrollHeight = context.scrollHeight;
  clonesHeight = getClonesHeight();

  if (scrollPos <= 0) {
    setScrollPos(1); // Scroll 1 pixel to allow upwards scrolling
  }
}

function scrollUpdate () {
  if (!disableScroll) {
    scrollPos = getScrollPos();

    if (clonesHeight + scrollPos >= scrollHeight) {
      // Scroll to the top when you’ve reached the bottom
      setScrollPos(1); // Scroll down 1 pixel to allow upwards scrolling
      disableScroll = true;
    } else if (scrollPos <= 0) {
      // Scroll to the bottom when you reach the top
      setScrollPos(scrollHeight - clonesHeight);
      disableScroll = true;
    }
  }

  if (disableScroll) {
    // Disable scroll-jumping for a short time to avoid flickering
    window.setTimeout(function () {
      disableScroll = false;
    }, 40);
  }
}

function init () {
  reCalc();
  
  context.addEventListener('scroll', function () {
    window.requestAnimationFrame(scrollUpdate);
  }, false);

  window.addEventListener('resize', function () {
    window.requestAnimationFrame(reCalc);
  }, false);
}

if (document.readyState !== 'loading') {
  init()
} else {
  doc.addEventListener('DOMContentLoaded', init, false)
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.Loop {
  position: relative;
  height: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

section {
  position: relative;
  text-align: center;
  height: 100%;
  scroll-snap-align: start;
}

::scrollbar {
  display: none;
}


body {
  font-family: "Avenir Next", Helvetica, sans-serif;
  font-weight: normal;
  font-size: 100%;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

nav ul {
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 1rem 0;
}

nav ul li{
  display: flex;
  justify-content: space-around;
}

.nav-link{
  text-decoration: none;
  color: grey
}

.one {
  background: black;
}
.two {
  background: darkblue;
}
.three {
  background: lightgreen;
}
.four {
  background: lightcoral;
}
.five {
  background: lightskyblue;
}
.six {
  background: orange;
}

h1 {
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  font-size: 80px;
  letter-spacing: 5px;
  color: #fff;
  text-transform: uppercase;
}

<nav>
  <ul>
    <li><a class="nav-link" href="#one">one</a></li>
    <li><a class="nav-link" href="#two">two</a></li>
    <li><a class="nav-link" href="#three">three</a></li>
    <li><a class="nav-link" href="#four">four</a></li>
    <li><a class="nav-link" href="#five">five</a></li>
    <li><a class="nav-link" href="#six">six</a></li>
  </ul>
</nav>
<main class="Loop js-loop">
  <section class="one" id="one">
    <h1>One</h1>
  </section>
  <section class="two" id="two">
    <h1>Two</h1>
  </section>
  <section class="three" id="three">
    <h1>Three</h1>
  </section>
  <section class="four" id="four">
    <h1>Four</h1>
  </section>
  <section class="five" id="five">
    <h1>Five</h1>
  </section>
  <section class="six" id="six">
    <h1>Six</h1>
  </section>

  <!--
  This block is the same as the first block to get that looping illusion going.
  You need to add clones to fill out a full viewport height.
  -->
  <section class="one is-clone">
    <h1>One</h1>
  </section>
  <section class="two is-clone">
    <h1>Two</h1>
  </section>

</main>

I know this code is not 100% functional yet, but I think it can lead us to a better answer.

Solution 2:

You can use ID in this case.

Set the ID for your section and add anchor tag and set href attribute to your section id.

<a href="#YourSectionID">Go Up</a> <!-- don't forget # before write your ID. -->

Don't forget set scroll-behavior to smooth for smooth scrolling.

Html5 Tech

Scroll To Section By Section

Solution 1:

Solution 2:

Post a Comment for "Scroll To Section By Section"