naw I just want it be slower and smoother when It clicks and moves to the respective place.
is it suppose to be in that script?
This one?
var pos = sticky.offset().top,
pos2 = 3000,
You lost me again 
When what moves to its respective place?
Its the destination that gets scrolled up by the fragment identifier and nothing to do with the sticky nav, the nav just moves with the page. If you want the nav to move slowly you need to control the scroll speed of the destination link which is as I mentioned the code that you were using in the first place.
You can add a transition to the nav but that will only show when you have scrolled to the bottom of the page and start going back up.
#navbar{transition:all 2s ease;}
It seems like you need to put the scroll routine for the link destinations back in place and then the page will slowly go to the target and the nav will appear to move up more slowly. This was the way that it originally worked before you pulled the code out.
When the sticky nav moves
Thats the thing I forgot which one that was
Your original code is still in post #1 and should still work if you set it up correctly.
Usually though you use the href in the anchor you are clicking (href="#destination) to get the destination rather than having to have too many if then statements in the js.
Here is an example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0}
body{padding:110px 0 0}
.nav{
position:fixed;
left:0;
right:0;
top:0;
height:100px;
background:#f9f9f9;
box-shadow:0 0 10px rgba(0,0,0,0.5);
text-align:center;
}
.nav a {
display:inline-block;
margin:0 10px;
}
.nav a.current {
background:blue;
color:#fff
}
h2 {
background:red;
color:#fff;
}
</style>
</head>
<body>
<nav class="nav">
<a class="scroll-link current" href="#link1">Link 1</a>
<a class="scroll-link" href="#link2">Link 2</a>
<a class="scroll-link" href="#link3">Link 3</a>
</nav>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<h2 id="link1"> Destination 1</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<h2 id="link2"> Destination 2</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<h2 id="link3"> Destination 3</h2>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- use velocity for smoother scrolling -->
<script src="http://cdn.jsdelivr.net/jquery.velocity/0.4.1/jquery.velocity.min.js"></script>
<script>
// Scroll links from menu
$(document).ready(function(){
$( ".scroll-link").on('click',function (e) {
e.preventDefault();
$('.nav a').removeClass('current');
$(this).addClass('current');
var target = this.hash,
$target = $(target);
$target
.velocity("scroll", { duration: 500, offset: -110, easing: "linear" })
.velocity({ opacity: 1 });
});
});
</script>
</body>
</html>
The above example is using velocity.js for smoother scrolling but can be changed for the jquery version if you want.
would it be better in the JQuery already and not have to have a seperate
script? or is it just preference?
Jquerys animations are jumpy and erratic while velocity is much smoother especially on mobile which is why I use it. It’s not that big a file (just throw away an image somewhere instead )
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.