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