We Keep Coding

Javascript for twitter-bootstrap's fixed navbar doesn't work when linking multiple pages?

website in question
OK, i don't understand javascript or jquery so, i pose this question to you guys.
I am working on courses from FreeCodeCamp and i created a one page site that worked well in codepen. but, since i already owned a domain/hosting i moved it over (and with some extra work got it to work properly).
My issue currently is with the navbar.
On the index.html it works properly. (when targeting jumplinks on the index.html page) it scrolls down to it and gives enough space above the h1 tags so they don't get behind the navbar.
I wanted to add another link to my page for my resume (which wouldn't work with the current javascript) so i had to add a class to each of the links in my navbar that were targeting ids on the index page, and updated my javascript from it targeting all the a tags to just the a tags with the class=jumps.
So, i thought my issue was fixed, until i went to my second page xp.html.
i changed the links in the navbar to be <a href="index.html#about> so that it would (hopefully) go to the index page and then jump down to the right section of the page with the jump link. but, that didn't work. it would just stay on my xp page.
So, i took the code out of the main.js file and into a index.js file, and linked it only to the index page. which allows me to now navigate properly between my two pages and the jump links, but if you are on the xp page and you click one of the jump link links, it now makes the h1 text go behind the navbar.
I hope this explanation is good?
So, i'm needing help to fix the current issue of my headers going behind my navbar when coming from my xp page (or other pages i add in the future)
I would really appreciate help with this!

using css and jQuery(index.js)
add a custom css in you main.css .pad-top{ padding-top:5%;} and add this in your html like this see the class
<div id="webfolio" class="row c-wrapper smooth nomargin pad-top">
and in your jQuery(index.js) replace the .top - 80 with 5
And If you use only jQuery(index.js) (If you want you can short this Query but I just share the full for understanding )
function anchorScroll(fragment) {
"use strict";
var amount, ttarget;
amount = $('nav').height();
ttarget = $('#' + fragment);
$('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 1000);
return false;
}
function outsideToHash() {
"use strict";
var fragment;
if (window.location.hash) {
fragment = window.location.hash.substring(1);
anchorScroll(fragment);
}
}
function insideToHash(nnode) {
"use strict";
var fragment;
fragment = $(nnode).attr('href').substring(1);
anchorScroll(fragment);
}
$(document).ready(function () {
"use strict";
$("a[href^='#']").bind('click', function () {insideToHash(this); });
outsideToHash();
});

Page scroll to right page from menu anchor but not from direct link

I'am using this free script
http://codyhouse.co/gem/css-faq-template/
http://codyhouse.co/demo/faq-template/index.html#payments
The demo has the same problem as my website, although it's even worse on my website.
If you use the menu, everything works fine. You have some space above the header.
But if you visit the direct link http://codyhouse.co/demo/faq-template/index.html#payments not from the menu
it looks like this
As you can see, there is no space above the header "payments".
It is even worse on my page. It starts at "Can I have.." and the header is hidden. Can not find where I can adjust this when I visit the page direct from the link without it effects how it looks when I visit the section from the menu.
When user clicks on a section
//select a faq section
faqsCategories.on('click', function(event){
event.preventDefault();
var selectedHref = $(this).attr('href'),
target= $(selectedHref);
if( $(window).width() < MqM) {
faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
closeFaqsContainer.addClass('move-left');
$('body').addClass('overlay');
} else {
$('body,html').animate({ 'scrollTop': target.offset().top - 69}, 200);
}
});
Javascript code: http://codyhouse.co/demo/faq-template/js/main.js
Style: http://codyhouse.co/demo/faq-template/css/style.css

Just a quick hack, use
if(window.location.hash) {
// if url contain '#'
// scroll down a few pixle
}
EDIT:
it's hard to demenstrated this in jsfiddle, since it won't let me play with the # hash.
var url = 'http://example.com/test.html#hash';
//you can get by using window.location.href
var hash = url.split('#')[1];
// this get the 1st hash variable
if(hash) {
// if hash exist
$('html, body').animate({
scrollTop: "5000px"
}, 0);
// scroll down a little bit
}

It's seems there's a couple of problems here. For me it looks like everything happens when a scrolling event fire.
Try this:
$(document).ready(function(){
$(window).scroll();
})

Link to a page inside Sammy.js website

I am using Sammy.js for my website and I want to send a link to a page on the website to someone in an email. I have set up links like this:
this.get('#/', function(context) {
$("#main").load("sections/home.html");
});
this.get('#/:page', function(context) {
$("#main").load( "sections/" + this.params['page'] + ".html" );
});
The first one is default, so that when you type in my website, it goes to the home.html section first and if I take that out, when I go to my website, nothing loads in #main. Now, if I were to just type into my URL bar mywebsite.com/#/contact, it will load mywebsite.com/#/, in other words, straight to the home page.
I will say that if I go to the homepage first, mywebsite.com/#/, and then modify the URL to the page I want, it will work. If I hit enter to reload the page, or if I try to modify it again, it will go back to the homepage. Please help.

Try wrapping it in a document.ready and run the default route - like this:
$(document).ready(function () {
Sammy('#main', function() {
$("#header").load("templates/header.html");
$("#nav-bar").load("templates/nav-bar.html");
$("#footer").load("templates/footer.html");
this.get('#/', function(context) {
$("#main").load("sections/home.html");
});
this.get('#/:page', function(context) {
$("#main").load( "sections/" + this.params['page'] + ".html" );
});
}).run('#/');
})
That seems to work on my end.

Use anchor tags within Foundation Section with deep linking

We are using Foundation Section with deep linking. We must be able to link to each tab from other parts of the site.
The content of each tab is also quite long and has a side nav with anchor links to items within each tab, but the anchor links don't work with deep linking turned on.
site.com/section#Tab <- Works for getting to the tab
site.com/section#Tab#Anchor and site.com/section#Anchor <- Does not work
Is there a work around for this or should I write a scroll to function and not use anchors at all?

Sort of hacked it using rels on spans in the side nav and anchors in the content, and return false to make sure the # doesn't show up in the url.
JS:
$('.side-nav span').on('click',function(){
var hash = $(this).attr('rel');
var anchor = $('#'+hash);
$('html, body').animate({
scrollTop: $(anchor).offset().top -30
}, 1000);
return false;
});

Using jQuery-Smooth-Scroll from one page to another?

I am currently using jQuery-Smooth-Scroll to smoothly scroll up and down to various anchor positions on one of my pages (Page 1). However, what I would also like to be able to do is, from another page (Page 2), link to Page1 (appending #bookmark to the url) and have jQuery-Smooth-Scroll pick up on the fact I am calling the page with a #bookmark and have it smoothly scroll down to the relevant position once the page has completed loading. I don't know if this is a possibility or not?
This is the version of Smooth-Scroll that I'm using:
https://github.com/kswedberg/jquery-smooth-scroll
I'm still relatively new to jQuery so I may be overlooking something obvious.

Ajma's answer should be sufficient, but for completeness:
alert(location.hash)
Edit: a more complete example:
// on document.ready {
if (location.hash != '') {
var a = $("a[name=" + location.hash.substring(1) + "]");
// note that according to w3c specs, the url hash can also refer to the id
// of an element. if so, the above statement becomes
// var a = $(location.hash);
if (a.length) {
$('html,body').animate({
scrollTop: $(a).offset().top
}, 'slow');
}
}
// }

It's possible, you want to put a call into the smooth scroll function when the page is finished loading. in jQuery, it's using $(document).ready(function () { your code } );
You'll need to put something in to parse your url to extract the #bookmark and then call the smooth scroll.