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

jQuery scrollTop event is not animating

I need jQuery animate together with scrollTop to create a smooth scroll effect to my anchor links. In my current project this is not working. All the animate - scrollTop Events are doing nothing. I load jQuery 3.1.1 in the header. In my footer main.js i use the the following javascript:
$('a[href*=#]').on('click', function(event){
console.log("ScrollTop");
$("html, body").animate({ scrollTop: 500 }, "slow");
return false;
});
I can see the ScrollTop in my Console but there is no animation. I dont know what to do i tried a lot of things. I also tested it in all the different browsers its working nowthere.

The issue is that your selector with href contains # gives a different meaning without the quotes. Once you put # in quotes, it works fine.
$('a[href*="#"]').on('click', function(){
$('html,body').animate({scrollTop: 500}, "slow");
});
Example : https://jsfiddle.net/3vy7adh7/
Or
If you want to avoid the post on any valid a tag,
$('a').on('click', function(e)
{
e.preventDefault();
if($(this).attr('href').indexOf('#') > -1)
$('html,body').animate({scrollTop: 500},"slow");
});
Example : https://jsfiddle.net/3vy7adh7/1/

This should work for you:
$('a[href^="#"]').on('click',function (e) {
var href = $(this).attr('href');
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 180
}, 900, 'swing', function () {
window.location.hash = target;
});
});

Scrolling to ID issue in jquery

I am trying to create smooth scrolling to IDs. When I click on a link its ID should be scroll to top (at a certain point of top. Ex: 200px from top) of the page.
I tried it something like this:
var $root = $('html, body');
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: (($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
}, 500, function () {
window.location.hash = href;
});
return false;
});
But it doesn't work and its always scrolling to top of the page.
Hope somebody may help me out.

I guess, the problem is your href, the target will presumably not be found. Maybe you'd be better off to store the element to scroll to in a data attribute, like so:
$('a[href*=#]').click(function(evt) {
evt.preventDefault();
var target = $(this).data('target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
With an anchor tag like so:
Brilliant rainbow colors
Obviously, the element with the ID somewhere_over_the_rainbow must exist somewhere in your DOM.

This should do the job correctly :
$('a[href*=#]').click(function() {
var href = $.attr(this, 'href');
var top = $(href).offset().top;
$('body').animate(
{
scrollTop: top - 200
},
500
);
return false;
});
Obviously, the item with the id equal to the hash of the anchor must exist.

scrollTo a div once a button is clicked?

I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#article-list').scrollTo('#news .section-wrap'); // this is the line I added
$('#article-list').fadeOut(500, function(){
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});

You will need to animate html and body and point to the selector within the jQuery animate function. Try this:
$('html, body').animate({
scrollTop: $('#news .section-wrap').offset().top
}, 2000);

Try something like this:
$(".paging-navigation a").click(function(){
$('html, body').animate({
scrollTop: $("#news .section-wrap").offset().top
}, 500);
});
You might need to alter something in this code, either timing or some bug since i could not test it currently.
Hope it is helpful.

scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .
As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

.animate() not working on Wordpress site

I'm trying to use the animate effect on the scroll associated with hashbang links on the page.
When I use this on a regular website it works perfectly.
As soon as I try to use it on a wordpress site it doesn't animate, it just jumps to the DIV instead of scrolling.
jQ code (Tried placing it in the head, body and footer (makes no difference) :
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
Here are my current versions of JQuery in case there is an issue there?
jquery.js?ver=1.11.0
jquery-migrate.min.js?ver=1.2.1
Could it be the order that wordpress is enqueing the scripts?
Any ideas because I'm pulling my hair out here!

try with wrap (function($){ //your content })(jQuery);
(function($){
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function(){
window.location.hash = target;
});
});
});
})(jQuery);

change to this:
<script type="text/javascript">
jQuery(document).ready(function($){ // pass $ as an arg here
You need to pass $ as an argument in the ready callback and you don't need to have jQuery.noConflict(); so remove it.
Because wordpress uses jQuery instead of $ so that this wont get conflicted with other libraries which uses $ as an alias, So you can do two things
Just do as suggested above or
replace every occurance of $ with jQuery.