HTML5/Javascript help on smoothscroll

Hey!

My problem atm is smoothscroll, this is a assignment I was given and I'm having trouble getting it to work

My problems are -

• Smoothscroll goes down, but doesn't go back up when i made the NAV bar fixed in css
• Because the navbar is fixed it covers the div section i made as the title

GIF of how the smooth scroll is now - Gyazo - 58dd4597f5c543ea3bd2cf2cf59e033c.gif

As you see the div with the title (web design, illustrations etc) I need the smoothscroll to still show that title when i click on it, i also need the smooth scroll to work going up aswell as going down


Javascript code-

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);
}

CSS for NAV bar code -

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;
}


.container{
        width:780px;
        margin:auto;
        background-color:#FFF;

    }

HTML5 code -

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>

I'd really appreciate if someone helped me on this, i know the codes a mess but thanks in advance!

 

Bump

 

You're saying to get element by id with section1-8, but those are not ids in your code. Post all the code if you want me to look at it.

 

I got it sorted out thanks

 

I personally would use Jquery

Code:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});