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>

css keyframe animation on clicking an anchor ('#') link

I have a link link to test and when clicking on it, the page will instantly jump to the 'test'-content.
How can I add a transition when switching between this in-page links?
Thank you very much :D
EDIT:
It would be nice if I could use a css keyframe instead of the jquery animation.
Anyone a solution?

The fastest way would be load in jQuery and insert this snippet.
Step 1: Insert jQuery script tag before the closing body tag (</body>)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Step 2: Insert this snippet below
<script>
// Bind all a href clicks to this function
$(document).on('click', 'a', function(event){
// Prevent default events
event.preventDefault();
// Animate the body (html page) to scroll to the referring element
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
});
</script>
You can edit where it says 1000 to change the speed and you can also add or subtract scrollTop: $( $.attr(this, 'href') ).offset().top to get additional offset off your element.
Example: This will be 100 pixels above your element instead of exactly on top.
scrollTop: $( $.attr(this, 'href') ).offset().top - 100

I'm assuming you mean to smoothly scroll to the target instead of jumping there abruptly. If so, here's a way using javascript and jQuery.
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
div {
min-height: 200vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test
<div></div>
<div id="test">test</div>

Here is a jquery example:
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
and a fiddle: http://jsfiddle.net/9SDLw/.
Neither the code nor the fiddle are mine, it is an answer I found here Smooth scrolling when clicking an anchor link

This is not possible using CSS animation keyframes, the scroll position is not a CSS property that can be affected. You can change the position of the page scroll using Javascript or a number of javascript libraries (eg: jQuery).

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

JQuery rolling - stop previous & generalize

i have code like this:
JavaScript
$( document ).ready(function() {
$("a.link1").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link1").offset().top
}, 2000);
//});
});
$("a.link2").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link2").offset().top
}, 2000);
//});
});
$("a.link3").click(function (){
//$(this).stop().preventDefault().animate(function(){
$('html, body').animate({
scrollTop: $("#link3").offset().top
}, 2000);
//});
});
});
Body of HTML:
<div id="menu">
LINK 1
LINK 2
LINK 3
</div>
<div id="content">
<a name="link1" id="link1"></a>
<!--some text-->
<a name="link2" id="link2"></a>
<!--some text-->
<a name="link3" id="link3"></a>
<!--some text-->
</div>
Please help me with this:
Stop doesn't seem to work the way I wanted. I want to somehow stop previous rolling when another link is activated.
Is there any way of generalization of the jQuery part. I have more than 3 menu links and I don't want to make a special function for each.
Thank you very much for your help.
Gomi

You can generalize by extracting the click callbacks to a common function:
var linkClickCallback = function(selector){
$('html, body').stop().animate({
scrollTop: $(selector).offset().top
}, 2000);
}
$( document ).ready(function() {
$("a.link1").click(linkClickCallback.bind(null, '#link1'));
$("a.link2").click(linkClickCallback.bind(null, '#link2'));
$("a.link3").click(linkClickCallback.bind(null, '#link3'));
});
Note that in the linkClickCallback i also wrote the proper use of stop() method.
EDIT:
This will work for all items in menu:
$( document ).ready(function() {
$("#menu a").click(function(e){
e.preventDefault();
linkClickCallback('#' + this.className);
});
});
with the same linkClickCallback function.

Yeah just generalise a function like this and then inside the function, look for the caller (this):
$("#menu a").click(function(e){
var t = $(this)
$('html, body').animate({
scrollTop: t.offset().top
}, 2000);
});

Screen not scrolling down when using JQuery slidetoggle()

I have a site where there is a called .slidingDiv which when the anchor .show_hide is clicked it appears and slides down which is great when it's the only content on the page.
If there is other content above this div it doesn't scroll down and show. Instead it shows the div but it is out of site, so it does actually work but not push the rest of the content up.
Here's the JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
Many thanks
Pete

Setting scrollTop in the callback of the slideToggle function or after the slideToggle function has been called (as you have did) results in jumpy behavior, at best. If you are looking for a smooth animation it is best to initiate the slide then animate the page to scroll down. This is demonstrated by this fiddle. Here is the js:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$(".slidingDiv").slideToggle(1000);
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top + $('window').height()
}, 2000);
});
});​

Just make a check before scrollTop
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click',function(){
$(".slidingDiv").slideToggle(function(){
if($('.slidingDiv').height() > 0) {
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top
}, 1000);
}
});
});
});
</script>