We Keep Coding

Section will be overlapped by header when come from another page

I have the following problem. What I want is when the user clicks in the navigation bar on "Contact" it will link to the contact page. This is a single page. When you are on contact and then clicking at the bottom of the page on, for example "Over ons" it should be redirect to the homepage (single page) and stop at that section. This works, but when you come from another page, the current section is overlapped by the header.
The jQuery code will not use the offset of the header, only when you are navigation inside the index.html.
Is there a way to fix the issue, so the section will not be overlapped by the header?
Live example:
http://codepen.io/anon/pen/NqxxQd
jQuery code:
// An offset to push the content down from the top
var offset = $('#header').outerHeight();
$('#primary-navwrapper li:not(.prev-page, .next-page), .list-of-links li').find('a[href^="#"]').click(function(event) {
event.preventDefault();
$('#primary-navwrapper li a').removeClass("current");
$(this).addClass("current");
var anchorId = $(this).attr("href");
var target = $(anchorId).offset().top - offset;
$('html, body').animate({ scrollTop: target }, 500, function () {
window.location.hash = anchorId;
});
});
function setActiveListElements(event){
// Get the offset of the window from the top of page
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var anchorId = $(this);
var target = $(anchorId.attr("href"));
var offsetTop = target.position().top - offset;
if (target.length > 0) {
if (target.position().top - offset <= windowPos && (target.position().top + target.height() + offset ) > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
}
});
}
$(window).scroll(function() {
setActiveListElements();
//updateLocationHash();
});

Your code to scroll down to each section needs to be placed in it's own function called something sensible like FireActiveElement. Give it one parameter that sends through your anchorId string. Your click listener then needs to call that function.
So you have a function similar to:
function FireActiveElement(anchorId) {
var target = $(anchorId).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500, function () {
window.location.hash = anchorId;
});
}
Then, what you can do is something like this:
function CheckHash() {
if (window.location.hash) {
FireActiveElement(window.location.hash);
}
}
Then you'll need to add that function as a callback to your body fade in:
$('body').fadeIn(500, CheckHash);
Difficult to test this works myself, but hope that helps you.
P.S.
If you need to have more things that are fired upon page load, you might want to change the fadeIn slightly to something like:
$('body').fadeIn(500, function() {
CheckHash();
// Examples:
SomeOtherFunction();
FireMeOnPageLoad();
});

scrollTop not working in firefox and IE

I have some problem with scrolltop in firefox and IE
I used scrolltop more than 2 time in my code in part one it works but in part two it doesnt
I have two arrows "next" and "prev" which when clicking on them page scroll to specific part,
I cant find how can I fix it?
jquery :
var lchiled=$("ul#portfolio li").last();
var fchiled=$("ul#portfolio li").first();
$('li.section').first();
$("ul#portfolio li:first-child").addClass("current");
$('a.display').on('click', function(e) {
e.preventDefault();
var t = $(this).attr('name');
that = $(this);
if (t === 'next') {
if($('.current').next('.section').length==0)
var $next = $('li.section').first();
else
var $next = $('.current').next('.section');
var top = $next.offset().top -65;
$('.current').removeClass('current');
$('body,html').animate({
scrollTop: top,
},
function () {
$next.addClass('current');
// alert(top);
});
}
else if (t === 'prev' && $('.current').prev('li.section').length > 0) {
var $prev = $('.current').prev('.section');
var top = $prev.offset().top -65;
$('.current').removeClass('current');
$('body').animate({
scrollTop: top,
}, function () {
$prev.addClass('current');
});
}
});
html :
<div id="container">
<ul id="portfolio" class="clearfix">
</ul>
</div>
lis are dynamically produce with jquery codes

It must be like this
$('body,html').animate({
scrollTop: top,
}, function () {
$prev.addClass('current');
});
insted of
$('body').animate({
scrollTop: top,
}, function () {
$prev.addClass('current');
});
I forget to update the prev part so this problem happened.

You use .animate on scrollTop in two places. In one, you (correctly) use html,body as the selector. In the other, you only use body. And you wonder why it doesn't work in some browsers ;)

try var offset = $(window).scrollTop(); this .

You can use window.scrollTo(x,y)

Scroll when div content is outside viewport

I've got a simple piece of code like this
http://jsfiddle.net/QTa2c/
and all I want is, when user click on some of the last elements in list to show the content,
$('a.showMeThis').click(function() {
$(this).next('.content').slideToggle('fast', function() {
// there's go all the magic
});
});
and it goes outside the viewport (partly or completely) - scroll of the height of div, so he can see all of the content.
I was looking a lot for some logic for this, playing around with position().top, window.innerHeight and more, but it never goes in the way I want…
Hope you guys will help me, take care and have a nice day!

Use .animate() and .offset()
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
$('html,body').animate({
scrollTop: $this.offset().top
}, 'slow');
});
});
Fiddle Demo
Updated after OP's comment
Updated Fiddle Demo
$('a.showMeThis').click(function () {
var $this = $(this);
$this.next('.content').slideToggle('fast', function () {
if ($this.position()) {
if ($this.position().top + $this.height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight)) {
$('html,body').animate({
scrollTop: $this.position().top - (window.innerHeight || document.documentElement.clientHeight) + $this.height() + 15 + $this.next('.content').height()
}, 100);
}
}
});
});

With condition it looks like this: http://jsfiddle.net/QTa2c/1/
if ($(this).parent().offset().top + $(this).height() > window.innerHeight + $(window).scrollTop())
{
var a = $(this)
$('html,body').animate({scrollTop: $(a).parent().offset().top})
}
I think, this code is enough to understand the logic =)
UPD: note, that you should insert return false; into .click event to prevent jumping to # anchor.

Click event stops working

I wish someone could help me, I'm a little bit irked about this problem since I've been resolving other issues with this scroll behavior that I'm trying to implement on this site... as you see my sub-menu (on the left) follows the window position as you scroll or you can click any option on the sub-menu wich will trigger an animation, well what seems to be the problem is that everytime I click a second time it won't work, until I re-click it, it will work...
Here's my code
Variables
var startDistance = 210;
var $scrollingDiv = $("#sub-menu");
var position = $("#footer").position();
var height = $("#sub-menu").height();
var pos = position.top - (height + 460);
This is to differ between users and animation scroll
$("body,html").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
if($(window).scrollTop() > startDistance && $(window).scrollTop() < pos) {
$scrollingDiv.stop().animate({
paddingTop: ($(window).scrollTop() - 75) + "px"
}, 'slow');
}
if($(window).scrollTop() == 0) {
$scrollingDiv.stop().animate({
paddingTop: 0
}, 'slow');
}
}
});
Click behavior
$("#sub-menu ul li a").live('click', function(ev) {
var $anchor = $(this);
console.log($anchor.attr('href'));
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo', function() {
$scrollingDiv.stop().animate({
paddingTop: ($($anchor.attr('href')).offset().top - 556) + "px"
}, 'slow');
});
event.preventDefault();
});
It might be the silliest thing but I've been watching my screen for last hour w/o being able to realize what's going on.
Edit: I'm posting my scroll code behavior too because I feel that It might be a global problem and not only related to my click code
Thank you in advance!

[22:00:25.137] ReferenceError: event is not defined # http://altivamedia.com/pruebas/romulos/wp/wp-content/themes/romulos/_/js/functions.js:45
You've accidentally wrote event instead of ev:
});
event.preventDefault();
});
Since event hasn't been defined a ReferenceError gets thrown. Simply use the correct variable:
});
ev.preventDefault();
});
Remark
In order to find such errors on your own use your browser's error console.

How to scroll page on multiple ID in js

Please check what i did yet http://jsfiddle.net/dUVmh/1/ .
About the animation i want to achieve is that:
When you first scroll down the page then window scroll to #green DIV. After that if you again scroll down window scroll to #yellow DIV & same at the time of scrollup (fom #yellow to #green).
About the issue:
You can see the animation it's stuck on #green DIV.
$(window).scroll(function(){
if($(this).scrollTop() > 0) {
$("html, body").animate({ scrollTop: $('#green').offset().top }, 1000);
}
else if($(this).scrollTop() > 1000) {
$("html, body").animate({ scrollTop: $('#yellow').offset().top }, 1000);
}
else{
$("html, body").animate({ scrollTop: $('#red').offset().top }, 1000);
}
});
I didn't have much experience in JS.
Thanks i advance :)

This was a fun problem to work on.
This solution places the divs into an array, and remembers the array index of the element that was last scrolled to. Once a scroll event is triggered it checks to see if the new scrollTop is above or below the current divs top offset and moves to the next or previous div in the array accordingly.
This solution allows you to have many divs. I tried to remove the flickering you get when you scroll to fast, but the only way to do that I believe would be to disable the scrollbars during animation.
http://jsfiddle.net/dUVmh/35/
$(function() {
var divs = [],
body = $('body, html'),
currentDiv = 0,
timeout;
$('div').each(function() {
divs.push($(this));
});
// we only need to capture the first scroll event triggered and then
// add another listener once we have done our animation
var scrollListen = function() {
$(window).one('scroll', function() {
doScroll($(this).scrollTop());
});
};
// Without the timeout, the scroll event would be triggered again too soon
var scrollEnd = function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
scrollListen();
}, 10);
};
// checks if the scroll direction was up and down and animates
// the body scrollTop to the next or previous div
var doScroll = function(scrollTop) {
var direction = scrollTop - divs[currentDiv].offset().top;
if (direction > 0 && currentDiv + 1 < divs.length) {
nextDiv = currentDiv + 1;
} else if (currentDiv - 1 > -1) {
nextDiv = currentDiv - 1;
}
if (currentDiv === nextDiv) {
scrollEnd();
}
body.animate({
scrollTop: divs[nextDiv].offset().top
}, 1000, function() {
currentDiv = nextDiv;
scrollEnd();
});
};
scrollListen();
});
Edit: Firefox scrollTop required to be changed on html and not body. Also fixed a problem with firefox calling scrollListen more than once at a time.

The problem is that the $(window).scroll(function()) gets called over and over again when scrolling through the ScrollTop animation with jQuery.
Here is a possible solution that checks if it is currently scrolling or not and only executes the ScrollTop animation once.
http://jsfiddle.net/dUVmh/29/
Side note: It might be a good idea to check which direction the user is scrolling (up or down) and depending on that scroll to the next div to the top or to the down.
You can check that be saving the last scrollTop position and comparing it with the current one.
UPDATE: Here's a solution that takes the scroll direction into account: http://jsfiddle.net/dUVmh/36/