Develop Reference

Animate navbar on scroll

When scrolling down the page on a desktop - The navbar fixes to the top of the page but it doesn't seem to animate. How can i add a animation/transition effect so that it moves naturally when scrolling?
Code Example: http://codepen.io/gza/pen/ygjpBy
$('a[href*="#"]:not([href="#slide"])').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 - 100
}, 1000);
return false;
}
}
});
});

Smooth scrolling with easing isn't working

I have a JQuery function which should allow smooth scrolling with JQuery easing however it does not work and I can't seem to find the error.
The code for the function is
$(function(){
$('a[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) {
var targetOffset = $target.offset().top;
$(‘html,body’).animate({scrollTop: targetOffset}, {duration:1600,easing:'easeInBounce'});
return false;
}
}
});
});
I made a JSFiddle with the function in to give an example. (I included the code for the JQuery easing)
Here is a similar function in JSFiddle however, even though this one does work, it does not include the option to use easing. I would appreciate any help in fixing the problem
Edit
To expand on what I mean by it isn't working; there is no animation when the links are clicked, it just instantly scrolls to that spot in the page.

You have some very weird things going on here.
On the following line you are using single double-quotes rather than two single quotes
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
On this line you are using characters that are not single quotes
$(‘html,body’).animate()
In the end we get this. jsFiddle
$(function(){
$('a[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) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, {duration:1600,easing:'easeInBounce'});
return false;
}
}
});
});
EDIT
To answer your questions in the comments of this answer, to get the "#" link working we change your $target = line to this
$target = $target.length ? $target : $('html');
And to get the anchor to appear on the page we simple remove the return false; from the function. After playing with the code I have reduced it to this:
$(function () {
$('a[href*="#"]').click(function () {
var $target = $(this.hash);
$target = $target.length ? $target : $('html');
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, {duration: 1600, easing: 'easeInBounce'});
});
});

I got a probelem with a solution above once I click on link it moves down up before it scroll smoothly. For those who get same problem as mine you can use this version it works better
// Smooth scrolling using jQuery easing with other links
$('a[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 - 54)
}, 1000, "easeInOutExpo");
return false;
}
}
});

navbar fixed Position offset scroll and smooth scroll

I'm having a problem, I have two js scripts that doesn't work together.
The first one makes a "scroll to ID" with an offset so it matches the height of the fixed navbar on top of the browser.
The second one is for making the scroll smooth as it travels, so it doesn't just instantly go to the target ID. The problem is I can't merge them together.
Scroll with offset:
$(document).ready(function () {
$(".first-scroller").on('click', 'a', function (event) {
event.preventDefault();
var o = $($(this).attr("href")).offset();
var sT = o.top - $("#fixedbar").outerHeight(true);
window.scrollTo(0, sT);
});
});
Smooth scroll:
$('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;
}
}
});

Offset smooth scroll bootstrap JS

I need the smooth scroll to be offset by 100px. So far I have this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
This gets my link moving! But how can I add .offset().top > 100 to this? I am having issues figuring it out if anyone can help out.

Sounds like you have a fixed navbar. Assuming your anchors are empty:
<a class="anchor" id="foo"></a>
Just offset the anchors in css:
.anchor {
top: -100px;
position: relative;
display: block;
}
Alternatively you can offset the scrollTop by updating your javascript:
scrollTop: $($anchor.attr('href')).offset().top - 100

ve1jdramas Hi there.
Have a look at this link here.
In this example, they use + or - .
Like this...
scrollTop: target.offset().top -100
or
scrollTop: target.offset().top +100
Try this and see if you can get this to work for you.
Or use this full 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 -100
}, 1000);
return false;
}
}
});
});

How could I add class on this script

I got this script to use on my project, one single page with scroll. Now my problem was everytime the page scrolled on the exact section the title always been hide by my fixed menu. Below are the script
$('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
}, 1500,'easeInOutExpo');
return false;
}
}
});
Hope you guys can help me.
Many thanks!

You'll need to take into account the height of the fixed header when applying scrollTop
If my comment wan't clear enough, try this.
$('a[href*=#]:not([href=#])').click(function() {
// does the pathname of this link match that of the current location.pathname?
var activeLink = (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,''));
if (activeLink || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
// here we will take into account the height of #navbar
var offset = target.offset().top + $('#navbar').height();
$('html,body').animate({
scrollTop: offset // apply our new offset
}, 1500,'easeInOutExpo');
return false;
}
}
});