Develop Reference

Why isn't my anchor tag smooth scrolling?

I have added this in the head
<script type="text/javascript" src="js/index.js"></script>
This is the link that navigates to the 'id="fillerSix"' div tag.
<h1>Mohammad Usman Khan</h1>
This is id="fillerSix" which the link should and does navigate to.
<div id="fillerSix" class="fillerSix">
This is my index.js file
<script type="text/javascript">
$('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;
}
}
});
</script>
The link works, in that it directs the user to the anchor but there is no smooth scrolling.

Your block in index.js should probably be wrapped in $(document).ready( function(){ /* your code here */ }); as indicated by DanielD above.
Likewise you do NOT need <script></script> tags inside of a .js file. This will lead to a parse error.
New contents of index.js:
$(document).ready( 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;
}
}
});
});

Why scroll doesn't work correct?

Link to jsfiddle - https://jsfiddle.net/dn5t2mwm/3/
$('a.item_link').click(function(){
var hash = this.hash, top = $(hash).offset().top;
console.log(hash, top);
$('html, body').animate({
scrollTop: top
}, 500);
return false;
});
I want to make smooth scroll. But when i account coordinates of link with anchor it returns different results. It looks like it accounts coordinates from the start of viewport - not a start of document. It works on codepen, but doesn't work on local and jsfiddle. css is disabled. Maybe you know what is wrong with it?

Use this piece of code:
$('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;
}
}
});

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

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

Highlight active anchor links with smooth scroll

I'm using the smooth scroll script along side the simple JQuery for add and remove classes for anchor links.
But both working separately but when you put them together the anchor highlight doesn't work.
Here is the code
var $navyyLi = $(".navyy li");
$navyyLi.click(function() {
$navyyLi.removeClass('highlight')
$(this).addClass('highlight');
});
$(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;
}
}
});
});
JSFIDDLE

One listener expects the click on a li, the other listener expects click on the a.
So I changed to the click on the a to do the highlighting as well:
$(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) {
//at this point they will only highlight if clicked anchor is valid to be scrolled
$(".navyy li").removeClass('highlight'); //<---Remove from all li
$(this).parents('li').addClass('highlight'); //<---Add the class to the parent li of the clicked anchor
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Fiddle: http://jsfiddle.net/hLeQy/100/
In this change, I made to highlight ONLY if anchor is valid, not when any anchor is clicked.
If you want to highlight even if anchor is not valid to be scrolled, change the two lines to be the first of the click listener.
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
$(".navyy li").removeClass('highlight'); //<---Remove from all li
$(this).parents('li').addClass('highlight'); //<---Add the class to the parent li of the clicked anchor
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;
}
}
});
});