Develop Reference

How do you use "Scroll To" to factor in the fixed nav heights at different media queries?

I have a button in my banner. This button, when clicked, I'd like it to scroll me to the div below the banner. This is the code I am using:
$(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;
}
}
});
});
When I click on it it'll scroll me, but it'll scroll me past the div. What I believe I need to do is factor in the height of the fixed nav and possibly the padding-top of the div I'm scrolling to.
The next thing is, what if I'm in the mobile view now and the height of the nav changes? How do I factor that in?
I suck at Javascript so any help/pointers would be greatly appreciated.

you could do something like this, so you can modify the scroll length
function scrollNav() {
$('a').click(function(){
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 160
}, 400);
return false;
});
};

SmoothScoll and lightbox conflict

I've this website, and there's a conflict between Smoothscroll javascript and lightbox one.
Here's the script for the Scroll
$(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;
}
}
});
});
How can I solve it? How can I make the lightbox and the smooth scrolling work simultaneously?

I'm not an jQuery expert and don't know how flexible the selectors are, but here are some suggestions:
Suggestion 1:
I don't think this selector:
a[href*="#"]:not([href="#"])
will work properly. You're selecting all href elements if they dont't have the attribute value "#". I think this case doesn't cover the links with a different value like you have: "#queen-bee". I consider you to use a different selector.
Suggestion 2:
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false; // Try removing the return
}
The return statement could prevent the event from bubbling, so the lightbox won't receive it. Try to remove it.

Link to Anchor on the same page minus some pixels

I integrated smooth scrolling to an anchor to my page. It works great with the 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
}, 1000);
return false;
}
}
});
});
Now when i click a link, it scrolls to that position. But since i got a fixed menubar on the top (height: 100px), it overlaps the content a bit.
Can i fix this somehow? like say in the code: scroll to that anchor minus 100px...
i thought it might work with
scrollTop: target.offset(-100).top
is that right?

jQuery's offset is a function to just give you an elements offset. This is not mean to change the offset itself. Just substract the 100px afterwards.
scrollTop: target.offset().top - 100

conflict between click.funcion and bootstraps' carousel buttons

I want to use bootsraps carousel and smooth scrolling with jquery.
Here is how I make smooth scrolling:
$('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
}, 2000);
return false;
}
}
});
I assumed this code prevents functions of carousel buttons. How can I modify it in a way that it doesnt affects carousel buttons.
Note that I am complete beginner at web development.
Thanks.

If I understand the question correctly, I think you can do one of two things:
Namespace the smooth scroll click event to avoid conflicts with
the carousel.
E.g. $('a').on('click.scroll', function() {…})
Allow event propagation in the smooth scroll function by removing return false;
Hope that helps!

Scrollspy doesn't work for the first click

I use bootstrap and the scrollspy.
I have a fixed to top navbar with affix.
The scrollspy is working correct but whenever i'm at the top of the site and no affix is active and i click then on another menu item the offset is totally off. After that the site scrolls to the right menu items with correct offset. Just not whenever i click away from the first nav item. How come? I used
Html:
<body data-spy="scroll" data-target=".mainnav">
And in the navigation id's
JS:
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
$('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;
}
}
});
Where could be the problem that the first click on a menu item after beginning at the top of the site is always wrong with the offset??