We Keep Coding

Jquery Smooth Scroll not working, Tried almost everything

Here's some bit of the code, I wrote -
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
}, )
})
I'm not sure why this is happening, would appreciate your help!!!

Well, if you're using a css framework like Material Design lite, then you need to use something different.
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('.mdl-layout__content').animate({
scrollTop: $(href).offset().top
},1000 )
})
Wrap it into ".mdl-layout__content", instead of "html, body" as it fixes it. I had the same problem, but that fixed it :)

Add some time value in animate function like animate((),1000) .They will give smooth effect .see the jquery documentation of animate()
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
console.log(href)
$('html, body').animate({
scrollTop: $(href).offset().top
},1000 )
})

2 things you need to look at
writing HTML correctly .the link must have href with # inside it, in your case <a id="go" href="#goTo">GOOO</a>
check if your id's are correctly written in html and then in JQ
$('#go').on('click', function(e){
e.preventDefault()
var href = $('#go').attr('href');
$('html, body').animate({
scrollTop: $(href).offset().top
}, 1000)
})
div {
margin-top:100vh;
height:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="go" href="#goTo">GOOO</a>
<div id="goTo">
</div>

Why won't this Javascript scroll function work?

I am mightily confused to why this won't run. I am trying to get the click to scroll button to scroll down.
https://jsfiddle.net/n9jqvas9/
<script>
$("button").click(function() {
$('html,body').animate({
scrollTop: $("s2text").offset().top},
'slow');
});
</script>

You are missing both jQuery (in your example) and a dot before s2text because it is a class.
$("#button").click(function() {
$('html,body').animate({
scrollTop: $(".s2text").offset().top},
'slow');
});
Here is your updated jsfiddle.

You need to add JQuery library and set the class selector:
$(".s2text").offset().top
Intead:
$("s2text").offset().top
Working example.

You are missing the dot (.) class name.
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".s2text").offset().top},
'slow');
});

Wait until a javascript function has finished before carrying out more

i have expandable headings that when clicked, show content.
I use a scrollTo method to scroll to the current clicked div to make sure its always in the screen view without the user scrolling.
However, where i currently use fadeIn / Out it looks messy as items are being faded in / out at the same time the page scrolling.
Is there a way i can only fade in / out the content when the scrollTo Has finished? e.g.:
Currently:
$(document).on('click','.headingHelp',function(){
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});
However what i want:
function scrollToDiv() {
$('html,body').animate({ scrollTop: $(this).offset().top }, 'slow');
}
$(document).on('click','.headingHelp',function(){
scrollToDiv() {
// ONLY DO THIS ONCE FINISHED SCROLLING
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
}
});

You can use a callback:
$('html,body').animate({scrollTop: $(this).offset().top},'slow',function(){
//all the code you want to execute later goes here
});

If I recall correctly, you can make use of animate's promise:
function scrollToDiv() {
return $('html,body')
.animate({ scrollTop: $(this).offset().top }, 'slow').promise();
}
Use it like this:
scrollToDiv().done(function(){
$('.infoHelp').fadeOut();
$('.headingHelp_sel').attr('class', 'headingHelp');
$(this).next('.infoHelp').fadeIn();
$(this).attr('class', 'headingHelp_sel');
});

On click buttons Scroll Div top of the window With increase height

In Demo 01 You can see the Div is Scrolling top of the page with increase height. And I need the same animation with click Buttons, like in Demo 02.
$('.work-showcase').click(function(){
$('.work-showcase').animate({height:'135px'}, 500);
$(this).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(this).offset().top });
});
});

Not sure if I understand what you want, but see if this Javascript works for you:
var map = {
"slice1": "#post1",
"slice2": "#post2",
"slice3": "#post3",
}
$('.clickable').click(function(){
var postId = map[$(this).attr('id')];
$('.post').animate({height:'50px'}, 500);
$(postId).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(postId).offset().top });
});
});
See demo at http://jsfiddle.net/xCKPW/1/.

What I think you want to do is have the animation and size change that you currently have get triggered when a button is clicked.
I also suspect you want the action to occur when the image is clicked.
In this case, move the animations into a separate function, and call that function onclick.
Here's your jsfiddle updated with buttons.
http://jsfiddle.net/Jq4Vw/132/
$('.work-showcase, button').click(function(){
moveAndResize($(this).index());
});
function moveAndResize(index){
var item = $('.work-showcase:eq('+index+')');
$('.work-showcase').animate({height:'135px'}, 500);
$(item).animate({height:'400px'}, 500,function() {
$("html, body").animate({ scrollTop: $(item).offset().top });
});
}
This works as long as the indexes are the same. If you want the index of the buttons to be different, add an id tag or something else that you can then pass to the moveAndResize which maps to the index of the item you want to change.

How can I make my anchor tag (this)

I've run into a small problem, Ive got a page full of anchor tags and when 1 of them is selected an animation begins, my only problem right now is that I havent defined the anchor tag as (this) so when a series of anchors are selected each of them perform the animation, im not sur right now how I can change the a tag to this though?
My code so far is:
$('a').bind('click', function(e){
$ajax = $('<div id="ajax"></div>');
$ajax.prependTo('#container');
$('html, body').animate({ scrollTop: 0 }, 'fast', function(){
$ajax.animate({ height: 300 }, 'slow', function(){
$preloader = $('<div id="preloader"></div>').hide();
$preloader.prependTo('#ajax').fadeIn('normal');
});
});
e.preventDefault();
});

you want to add an id to your anchor tag like this
<a id="myTag" href=""></a>
Then you can access it like this
$('#myTag').bind(...
You should only use an id once per page (meaning that every id is unique, not that there can only be 1 id per page).
Here's some more info on the id-selector from Jquery and more selectors in general

You do not use var keywords. This is bad, as all variables you create this way are in the global scope overwriting each other
$('a').bind('click', function(e){
var $ajax = $('<div></div>').prependTo('#container');
$('html, body').animate({ scrollTop: 0 }, 'fast', function(){
$ajax.animate({ height: 300 }, 'slow', function(){
$('<div></div>').hide().prependTo($ajax).fadeIn('normal');
// you can refer to $ajax here! --^^^^^
});
});
e.preventDefault();
});