Need some javascript/html5 help

[chris yolo]

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

[Solution]

Feedback wont be left, considering thats for market trades only and things like these aren't allowed in the market Help is still allowed of course.

[Rudie]

Could you create a JSFiddle? Put ALL your HTML, CSS and Javscript of your page in there, that way I can help you better.

Edited November 16, 2016 by Rudie

[chris yolo]

Could you create a JSFiddle? Put ALL your HTML, CSS and Javscript of your page in there, that way I can help you better.

Speaking to someone else about that, i just put it in but the smoothscroll doesnt work at all from jsfiddle for some reason 

 

https://jsfiddle.net/df0ksp8s/

 

It all works fine going down from brackets (the coding program i was using) 

Could you create a JSFiddle? Put ALL your HTML, CSS and Javscript of your page in there, that way I can help you better.

http://codepen.io/alpha123/pen/qqapZX this works, if it doesnt for you i can zip it and send you it to run it locally

[harryth3hopp3r]

Sorted this for him

[Rudie]

Sorted this for him

Just when I got it fixed

[chris yolo]

Just when I got it fixed

Have skype? you might be able to help me with some other things :P 

[Rudie]

Have skype? you might be able to help me with some other things :P 

It's rudie.visser