Smooth scrolling animation on one page sites

Question

I am new to coding, but I am able to code a site that is not too complicated and without the back end. But there is something that I don't know how to do and I cant find tutorials on it . All the one page sites have this . And is that smooth scrolling effect when you click an a tag from the nav bar. Can you give me a tutorial or tell me how is it done ?

Possible duplicate of [Smooth scrolling when clicking an anchor link](https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link) — Jan, May 23 '19 at 16:00
Welcome to Stack Overflow, you can find help here, programmers that help programmers, so you should show the code what you have tried, if you are looking for a tutorial, a little research in this very site will be enough for you — Rodney Salcedo, May 23 '19 at 16:43

Kobe · Accepted Answer · 2019-05-24T08:10:28.243

0

Using scrollIntoView, setting behaviour to smooth makes the smooth scroll effect:

document.getElementById('scrolldiv').scrollIntoView({behavior: 'smooth'})

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

TOP
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

Note: this code will make your page scroll too.

Or, you can use css to make all scrolling smooth, like when clicking on an anchor tag:

html {
  scroll-behavior: smooth;
}

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

<a href="#scrolldiv">Scroll to div</a>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

EDIT:

function scrollToDiv(div) {
  document.getElementById(div).scrollIntoView({behavior: 'smooth'})
}

// NOTE: I had to use a different function name as scroll() already exists in JS

.box-red {
  display: block;
  height: 200px;
  width: 100%;
  background-color: red;
}

.box-blue {
  display: block;
  height: 200px;
  width: 100%;
  background-color: blue;
}

<button onclick="scrollToDiv('scrolldiv')">Scroll to div</button>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>
<div class="box-blue"></div>
<div class="box-red"></div>

<div id="scrolldiv">Scroll here</div>

edited May 24 '19 at 08:10

answered May 23 '19 at 14:55

Kobe

6,226
1
14
35

OMG, was this simple this hole time ? Thank you so much !! But in the first version I dont understand how you can make the buttons scroll to a specific point. – HHH May 23 '19 at 15:50
In the first example, you would take the one line of javascript i wrote, wrap it in a function, and then call it inside of an onclick on your desired button. – Kobe May 24 '19 at 07:25
like this ? `const buttonX = document.querySelector('.button'); function scroll(scrolldiv) { document.getElementById('scrolldiv').scrollIntoView({behavior: 'smooth'}) } buttonX.addEventListener('click', () => { scroll(about-section); })` – HHH May 24 '19 at 08:06
Nicely done. You're almost there. In your function you take the parameter scrolldiv, but you do not call it. You can do this by removing the quotes inside `document.getElementById('scrolldiv')` -> `document.getElementById(scrolldiv)`. I also see that you are using an event listener. This works, but when using a queryselector, this can return multiple results. I would recommend using something like this: `` ill add an edit in my answer now @HHH – Kobe May 24 '19 at 08:07
@HHH As mentioned in my edit, you will not be able to use the function name `scroll()` , since this already exists in javascript. Use something like `scrollToElement()`. – Kobe May 24 '19 at 08:11
As I said I am really new to coding and I never saw anything like this: in JS But I guess the code should look more like this ? const buttonX = document.querySelector('#buttonX'); function scrollTodDiv(div) { document.getElementById(div).scrollIntoView({behavior: 'smooth'}) }; – HHH May 24 '19 at 08:23
Almost! One thing, there's a minor typo - `scrollTodDiv` -> `scrollToDiv`. When you call the onClick from the button you are calling `scrollToDiv(about-section)`. `about-section` is not defined, but rather, you would want it as a string -> `scrollToDiv('about-section')`. Well done, though, you're doing well for someone new to coding – Kobe May 24 '19 at 08:29
thank man :) I have a problem with typos . I tough that ('about-section'). should be the Id of the div I want that buttonX to scroll to. – HHH May 24 '19 at 08:46
Yeah that's right, you just needed to provide it as a string. – Kobe May 24 '19 at 09:04
Got it ! Thanks ! – HHH May 24 '19 at 09:09
Anytime, if you ever need anymore help, feel free to ask – Kobe May 24 '19 at 09:10
Sure , I wish we could get in contact via facebook or something – HHH May 24 '19 at 09:14
I'm not a facebook user I'm afraid :p I'm not one to give away personal information, but I use discord if you want to add me there. – Kobe May 24 '19 at 09:21
That's better ! – HHH May 24 '19 at 10:23

score -1 · Answer 2 · answered May 23 '19 at 14:56

-1

Here is tutorial: https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1

Not sure if that's what you were looking.

answered May 23 '19 at 14:56

Oleg Oshkoderov

500
1
4
17

Smooth scrolling animation on one page sites

2 Answers2