Codepen not scrolling with my js

JavaScript
1

When I run my website locally my js scrolls like it should. However when I try it on code pen it does not scroll and i’m not sure why.

My pen
should work like this one.

2

What do you mean? I can scroll the page fine.

3

When you click on lets say the navbar portfolio button it should scroll to the portfolio section.

4

"a[href='#portfolio']"

If you use that notation you are targeting a specific ID, which is missing in you html code.
I tried to add id=portfolio to your porfolio div and it worked :slight_smile:
Hope it helps,

-LyR-

5

That just makes it jump to the spot instead of smoothly scrolling to it.

In my js i have
var portfolio = document.querySelector("a[href='#portfolio']");

to select the button on my nav then i use

portfolio.addEventListener("click", function() {
  var target = document.querySelector(".section_portfolio");
  var topPos = target.offsetTop - 40;
  smooth_scroll_to(document.body, topPos, 1000);
});

to target my div with class
var target = document.querySelector(".section_portfolio");

to get its pos
var topPos = target.offsetTop - 40;

then i use
smooth_scroll_to(document.body, topPos, 1000);

to smoothly scroll to the div like it does on my github version but for some reason it doesn’t work on code pen and i am not sure why.

6

Uhm…i’m not sure about what that smooth_scroll_to is meant to. I found this page on github, are you referring to it ( or something similar)?

Anyway, i found another link on css tricks.com: it’s a snippet that will smoothly scroll your page. I can’t help to identify the problem in your code because i’m not sure what you’re referring to, i hope this alternative way to achieve the result could help ^^
Good luck,

-LyR-

7

the smooth_scroll_to is a smooth scroll without using jQuery and it works locally and on github.
if you go onto my github version of it Site On github pages
if you click on the nav buttons they scroll smoothly to the right section.