smooth scrolling with pure javascript

Asked

Viewed 109 times

1

I’m studying pure javascript to get out of jquery a little so I’m trying to recreate simple functions that I use on a day-to-day basis and one of them is the smoothing of the scroll but I found nothing concerning on the internet anyone knows how to soften the scroll only with pure javascript? thanks in advance.

javascript

  • You want something like a btn "back to top" or one that works in the "ancoras" system what specifically you need?

  • to tell the truth the two kkkk

1 answer

1


Here is a simple example just with pure JS. There is no jQuery.

Example Smooth internal scrolling with Anchors only.

var smoothScroll = {

  move : function (old, des, actual) {
    easeInOutQuart = function (t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; };
    actual += 1;
    ease = easeInOutQuart(actual / 100);
    delta = des - old;
    delta *= ease;
    delta += old;
    window.scrollTo(0, delta);
    if (actual < 100) {
      window.requestAnimationFrame(function () {
        smoothScroll.move(old, des, actual);
      });
    }
  },

  linkInit : function (e) {
    e.preventDefault();
    link = e.target.getAttribute("href").substr(1);
    block = document.getElementById(link).offsetTop;
    client = document.documentElement.scrollTop;

    smoothScroll.move(client, block, 0);
  },

  init : function () {
    links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      link = links[i].getAttribute("href");
      if (link.search("#") == 0 & link.substr(1) != "") {
        links[i].onclick = smoothScroll.linkInit;
      }
    }
  }
};

window.onload = smoothScroll.init;
header {
  position: fixed;
  top: 0;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  height: 3vw;
  line-height: 3vw;
}
header nav ul {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0px auto;
}
header nav ul li {
  list-style: none;
}
header nav ul li a {
  color: black;
  text-decoration: none;
}

.content {
  margin-top: 3vw;
}
.content .block {
  height: 100vh;
  width: 100vw;
  border: 1px solid black;
}
<header>
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>
  </nav>
</header>

<div class="content">
  <div id="one" class="block"></div>
  <div id="two" class="block"></div>
  <div id="three" class="block"></div>
</div>

Source: https://codepen.io/VicoTar/pen/mBqmBM?q=pure%20js%20smooth&order=popularity&depth=everything&show_Forks=false

Example of "Back to Top" soft only with Pure JS

function getId(e){return document.getElementById(e)}
function showHideBackToTop() {
  var toTop_button = getId("scrollToTop-button");
  var scroll_position = window.pageYOffset;
  if(scroll_position>1000) {
    toTop_button.className = "";
  }
  else{
    toTop_button.className = "unvisible";
  }
}
window.addEventListener("scroll", showHideBackToTop);

function scrollToTop(){
  showHideBackToTop();
  window.scrollBy(0,-200);
  var s_position = window.pageYOffset;
  if(s_position >= 1) {
    setTimeout(scrollToTop, 10);
  }
}
#container {
  position:relative;
}

#header {
  background:#333;
  color:#a7a7a7;
  font-weight:bold;
  font-size:25px;
  padding:30px 30px;
  text-align:center;
}

#content {
  max-width:640px;;margin:20px auto;
  font-size:20px;
  line-height:28px;
  text-align:justify;
  font-family:Cambria,serif;
  font-style:italic;
}

#scrollToTop-button {
  text-decoration:none;
  position:fixed;
  bottom:40px;
  right:40px;
  background:#333;
  color:#a7a7a7;
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius:100%;
  transition:opacity 1s;
}

.unvisible {
  opacity:0;
}
<div id='container'>
  <div id='header'>
  BACK TO TOP
  </div>
  <div id="content">
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>

</div>
  <a id='scrollToTop-button' class='unvisible' href='javascript:void(0)' onclick='scrollToTop()'>TOP</a>
</div>

Source: https://codepen.io/kardinata/pen/woNPNX?q=smooth%20back%20to%20top&order=popularity&depth=everything&show_Forks=false

  • I’ll test it here

  • worked perfectly vlw bro

  • Cool that worked! I don’t know much about JS, but when I need to consult Codepen, there’s always something interesting there

  • i used to Angularjs and jquery n stopped to learn pure javascript even ai agr to doing for a rsrs project

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.