We Keep Coding

JQuery Smooth Scroll - How to not target one anchor link?

I'm using the following Jquery to smooth scroll between the anchor links on my page. I have one link that I would like this not to target - is there a way to edit the code to target all but one anchor link?
I have copied the link below also.
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
This is the link I do not want to be called:
Ok
These are links I do want to call with the function:
<li class="key-details">Key Information</li>
<li class="about">About the Service</li>
<li class="health">Health Experience</li>

Solution 1:
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
if($(this).hasClass('wp-default')) return;// with this line of code you'll prevent to call function on "OK" anchor
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Solution 2:
Or you can modify your code in this way:
var $root = $('html, body');
$(document).on('click', 'a[href^="#"]:not(".wp-default")', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
Solution 3:
Another approach is using other properties for href:
Ok
javascript:void(0); will prevent any js function to be called by this anchor.
P.S: You can use this class name as well cn-set-cookie instead of wp-default or set a class to those anchors that you don't want to smooth scroll called by them.

Give it a class... Say "no_smooth".
Ok
Then exclude it using :not().
$(document).on('click', 'a[href^="#"]:not(".no_smooth")', function (event) {
//... Rest unchanged
});

Animate scroll when button taped

Good Evening,
I have been trying to animate a scroll-feature when tapping on a button. Below you will find the code that isn't working, my question is why.
$(document).ready(function () {
$('a[href="#panel-body"]').on('click', function (event) {
if(this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate({
scrollTop: $(hash).offset().top
}, 800 function () {
window.location.hash = hash;
});
}
});
});
I have assigned a link with the href="#panel-body". Tried with different variants and searched for a solution, still haven't managed to solve it.
Thanks for the help in advance!

I just found out that you want to create Up Going Button, For do this use the code below :
$(document).ready(function () {
$('button').click(function () {
$('html, body').animate({
scrollTop: '0px'
}, 750);
});
});

Simple jQuery scrollTo doesn't work on my site

I tested the one or other solution of stackoverflow but it can't resolve my problem.
Here is the side:
http://web02980.p4.imv.de/
It's a wordpress-site and I want to use a simple jQuery function to scroll from a anchor to a headline.
Here is the jQuery code http://jsfiddle.net/5phLjjce/1/
In jsfiddle it works, but not on my site.
function scroll($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}
jQuery(document).ready(function ($) {
scroll($);
});
I tested the jquery-file in the header and in the footer. I tested it in the generell jquery-file and in a extra file. Nothing want to scroll.
Thanks for help.

In your example, just replace var $root = $('html, body'); with var $root = $('.overflow');. It's just a specific thing in your HTML markup.

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);
});

Smooth Scroll Jumps Rather than Scroll

I have used Smooth Scroll Plugin From CSS TRICKS,
Its working great but for only 2 ancoher links and not for another one, please see the demo here,
LIVE DEMO
Its working Great for industries and Pricing, but on testimonial its just jump to the position and also the fixed nav cut off the section too.
<script>
$(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 - 130 // - 130px (nav-height)
}, 900, 'swing', function () {
// Replace this with something that can be easily parsed and used by your code
window.location.hash = '3' + target;
});
});
});
</script>

Here i've made a jsfiddle,
jsfiddle.net/Thq62/
and it's working fine just added a proper id and hash to the links