Jump to content

Need some javascript/html5 help


chris yolo

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...