We Keep Coding

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

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.

Scrolling animation code not working

hey guys i am an absolute newbie to jquery and here is one of my first scripts , its basically suppose to add an animation basically when scrolling to a particular, section , the fiddle is here.
the scrolling code that i have in jquery is :
$('nav a[href^="#"]').on('click', function (e) {
e.preventDefault();
$('nav a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
now i only know basic debugging in JS and so the only fault i could find in the script is that target is not defined. i got this script from an online tut and it worked perfectly over there , but i have no idea why here its not working.
i can't understand the authors intent of adding an undefined variable .
can somebody please point me out what am i doing wrong ? original Tutorial code can be found here.
TY .
Alex-z

Instead of animating html, body, you probably want to animate .content:
$('.content').animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
Fiddle
In this code:
var target = this.hash,
… this refers to the a element that was clicked, and hash refers to its URL.
So for this element:
Example-1
… this.hash would be #ex-1.
This code:
$target = $(target);
… is now equivalent to:
$target = $('#ex-1');
… which refers to the div with that id.
.content is then scrolled to that div's top position.

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

Can't Get jQuery Animated Scroll Working on Chrome

I've been struggling to get an Animated scroll working on this site www.nicbrwn.com/dev but the scrolling only seems to work on Firefox and I need it to work on all platforms.
The jQuery I'm using to 'scroll' is here:
<script>
$(document).ready(function() {
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function() {
window.location.hash = target;
});
});
});
</script>
All help would be appreciated.

You need to remove overflow: auto on the body, html in your css. That's what's stopping it.

Select both html and body elements:
$('html, body').stop().animate({});