We Keep Coding

jQuery scroll to anchor with exception

friends,
I'm building single page website, which uses the jQuery function to scroll to an anchor, when the menu link is being selected. Here is the code I use:
(function($) {
var jump = function(e)
{
if (e) {
e.preventDefault();
var target = $(this).attr("href");
} else {
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top - 150
}, 1500, 'swing', function()
{
location.hash = target - 150;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show()
jump()
}, 0);
} else {
$('html, body').show()
}
});
})(jQuery)
Now this function is called for all html 'a' elements with 'href'. I need to modify the function above, so it would work for all defined links except this one with the anchor #nav-menu:
<span></span>
Any suggestions would be very appreciated.

Jquery provide a set of built-in filters that you can use in your case you may use:
the built in filter not() as following:-
$("a[href^=#]:not([href=#nav-menu])").click(jump);
build you own business filter as following:-
$("a[href^=#]").filter(function() {
//you may here do whatever filteration business you want
return $(this).attr("href")!='#nav-menu';
}).click(jump);
Simple Example Here

Change hash and animate scroll to element

I have a link and an element on the same page:
Click
<div id="#about-us"></div>
And the following javascript:
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
This should animate a scroll to #about-us element,but it doesn't , it goes straight to element without animation,probably because the hash condition is not met,though there is a hash in url,because the hash is changed after the function.
I need a way to auto scroll to that element with animation,when you click the link . As example,if this page is index.php , and you want to go from another-page.php to index.php , straight to that element, it should load the page,and then scroll to the element,same if you are on index.php but at the top of the page and you click on the link,it should scroll down to the element.
The only problem is when you are on the same page.It doesn't pass the condition,so the animation doesn't work.
UPDATE I've changed the code a little bit.Now the condition is meet,but the animation doesn't work..
$('#link').click(function(e) {
window.location.href='index.php#about-us';
var scrollto = window.location.hash;
if (window.location.hash != null && window.location.hash != '') {
alert(scrollto);
$('html, body').animate({
scrollTop: $(scrollto).offset().top
}, 500);
}
});

This is because window.location.hash is not defined by the time you click on the link and the event handler is called.
Try using:
jQuery(function($) {
$('#link').on('click', function(e) {
e.preventDefault();
var scrollTo = $(this).attr('href'); // retrieve the hash using .attr()
if (scrollTo != null && scrollTo != '') {
$('html, body').animate({
scrollTop: $(scrollTo).offset().top
}, 500);
}
});
});
Also, change your HTML code with:
<div id="about-us"></div> <!-- no need for prepending id value with # -->
See this working JSFiddle
If you want to bind the event on page load, use:
$(document).on('load', function(e) { /* the codez */ });
And retrieve the location hash with var scrollTo = window.location.hash; that will be defined when the page loads.

This code works for me
HTML for same page scroll
Click for About us
<div id="about-us"></div>
HTML for external page link
Click for product introduction
HTML for external page scroll
<div id="introduction"></div>
jQuery
if(window.location.hash){
var getUrlAfterHash = window.location.hash;
if($(getUrlAfterHash).length > 0){
$('html, body').animate({ scrollTop : 0 });
scrollToTop();
}
}
$('.link').on('click', function(e){
e.preventDefault();
var getUrlAfterHash = $(this).attr('href');
scrollToTop();
});
function scrollToTop(){
var idPositionHeight = $(getUrlAfterHash).offset();
$('html, body').animate({ scrollTop : idPositionHeight.top}, 800);
}

Scrolling to a div using jquery

I have a question that was answered before probably, but I was not able to make a code work.
I have an <a href="#page-contact">, and once the user click on it, it should scroll down (with animation) to a div with id "page-contact". It does take me to the form but with no animation
Here is the code:
<li class="">Contact</li>
<section id="page-contact" class="page-contact">
</section>
$('.page-contact').on('click', function(event) {
var target = $(this.href);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});

Actually something really small..
$('.page-contact').on('click', function(event) {
//..
};
You connect this to a click on the target div, not the button.
Connect to event to a class that your button has and it will work.
$('#scrollButton').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});
Fiddle to try out: http://jsfiddle.net/Macavity/xeqmnoLL/2/

$(this.href) not valid selector so target variable always empty, change var target = $(this.href); to var target = this.href; to get link
$(this.href) seletor work as.
$("http://stackoverflow.com/questions/29515247/scrolling-to-a-div-using-jquery#29515468")
> Object[]
$('.page-contact').on('click', function(event) {
var target = this.href;
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});

Your selector is wrong, change to this:
$('a[href="#page-contact"]').on('click', function(event) {
var target = this.getAttribute("href");
if($(target).length) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#page-contact").offset().top
}, "slow");
}
});

One reason is href property returns the absolute path of the anchor, i.e. "http://www.example.com#hash". As jQuery can't find the target element the length of the collection is 0 and the if block is not executed.
Either use this.getAttribute('href') which returns the original href attribute or the hash property that returns hash segment of the href attribute instead of the href property.
var target = $(this.hash); // $('#page-contact')
Also note that your click handler is bound to the target section element not the a element.
$('li a').on('click', function(event) {
var target = $(this.hash);
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, "slow");
}
});

Adding effects when anchor tag is clicked

Is there a way to add a class to any div that is being scrolled to by clicking an anchor?
I currently have this code but can only add the "animated swing" class to the #ecomm div..
Ideally any anchor on the page that I click on I not only want to scroll down to it but add an animation class..
My code so far:
<script>
$('a[href=#ecomm]').click(function(){
$("#ecomm").addClass( "animated swing" );
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
</script>

Should work for all anchor tags with # hrefs.
<script>
$('a[href^=#]').click(function () { // Use all anchor tags with an href that starts with #
var href = $(this).attr('href'); // Get the href for the clicked anchor.
$(href).addClass( "animated swing" ); // The href is the same as the id.
$('html, body').animate({
scrollTop: $(href).offset().top
}, 500);
return false;
});
</script>
Taking into account #rorypicko's comment, a data attribute could be added to ensure only # hrefs you require will use this functionality:
<a href="#ecomm" data-scroll-link>Text</a>
<script>
$('a[href^=#][data-scroll-link]').click(function () { // Use all anchor tags with an href that starts with # and the specified data attribute.
var href = $(this).attr('href'); // Get the href for the clicked anchor.
$(href).addClass( "animated swing" ); // The href is the same as the id.
$('html, body').animate({
scrollTop: $(href).offset().top
}, 500);
return false;
});
</script>

something like this:
<script>
var href
$('a').click(function(){
href = this.attr('href');
$('div').each(function(){
var thisDiv = this
if(this.attr('id') == href)
{
thisDiv.addClass( "animated swing" );
}
$('html, body').animate({
scrollTop: thisDiv.offset().top
}, 500);
});
return false;
});
</script>
Hope this works.

White flash on transition between HTML pages

I'm trying to implement some JavaScript code I found here on stackoverflow to make a smooth transition between one link on a page and other section in other page using the standar:
<a href="example.html#anchor">
The issues is that when the user clik the link, 1 second white flash appears before the smooth scroolling makes. I dont like this behavior for the "User Experience"
How can I to prevent this?
The JavaScript:
(function($){
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000, function()
{
location.hash = target;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
Thanks.