Need some javascript/html5 help

November 16, 20169 yr

Hey!

I'm having a problem atm with my smoothscroll on an assignment i was given for class. It's for a personal portfolio.

I have 2 problems -

Smooth scroll goes down, but not up again

Because the navigation bar is fixed, the smoothscroll goes under the title of that section of my portfolio

GIF of what i mean - https://gyazo.com/58dd4597f5c543ea3bd2cf2cf59e033c

As you see the white bit with the title, my smoothscroll currently goes over it and i need it to stop just above it so the title still shows, aswell as the smoothscroll to go back up again when i want it to

HTML5 code -

<nav class="nav nav--red">

<ul class="nav__list">
<li class="nav__list__item"><a onclick="initScroll('section8'); return false; " href="#">About</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section2'); return false; " href="#">Illustrations</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section3'); return false; "href="#">Photoshop Work</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section4'); return false; "href="#">Photography</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section5'); return false; "href="#">Web Design</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section6'); return false; "href="#">Audio</a></li><!--
--><li class="nav__list__item"><a onclick="initScroll('section7'); return false; "href="#">Contact</a></li>

</ul>
</nav>

.CSS code -

.nav__list {
margin: 0;
padding: 0;
text-align:center;
}
.nav__list a {
padding: .75em 1.5em;
transition: all .25s ease-in-out;
}

.nav__list__item {
border-style: solid;
border-width: 0 0 1px;
}
.nav__list__item,
.nav__list__item a {
display: block;
}



.nav__list > .nav__list__item {
border-width: 0 1px 0 0;

}


.nav__list > .nav__list__item,
.nav__list > .nav__list__item a {
display: inline-block;
}



.nav {
position:fixed;
background-color: #f5f5f5;
width:100%;

}

.nav .nav__list__item {
border-color: #e5e5e5;
}

.nav a {
color: #555;
text-decoration: none;
}

.nav a:hover, .nav a:active, .nav a:focus {
background-color: #e5e5e5;
}

Javascript code -

var marginY = 0;
var destination = 0;
var speed = 10;
var scroller = null;

function initScroll(elementId){
destination = document.getElementById(elementId).offsetTop;

scroller = setTimeout(function(){
initScroll(elementId);
}, 1);

marginY = marginY + speed;

if(marginY >= destination){
clearTimeout(scroller);
}

window.scroll(0, marginY);

//console.log(destination);
}

window.onscroll = function(){
marginY = this.pageYOffset;
};

function toTop(){
scroller = setTimeout(function(){
toTop();
}, 1);

marginY = marginY - speed;

if(marginY <= 0){
clearTimeout(scroller);
}

window.scroll(0, marginY);
}

I'd appreciate so much if someone could help me out with this, I see these 2 guys have done web before so I'm going to tag you if it's an easy fix please tell me, if it's complicated pm me and I can pay/reward you for fixing!

@@Rudie

@@harryth3hopp3r