We Keep Coding

How to scroll down on click button 1 time

i want to know how i can scroll down only 1 time from homepage on click of button, if already scrolled then on click button to don't scroll down?
I'm suck with jQuery and i don't know how to do it.
Currently using this code but its always back at #what-is-it id so i don't like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
if you have solution with javascript its also welcomed.
Just want to scroll down if users is on homepage? And if he back at home page make button again scroll down him.

Just use this styling for the navbar:
#nav {
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
}
And the solution for jQuery part is in this jsfiddle.
https://jsfiddle.net/Lnq2etu9/5/ - I think what you're looking for is this.
I just edited Sim's code to make it work for you.

Yust unset your click event with jquery off(). Here ist the API: http://api.jquery.com/off/
So update your code like this:
$("#scroll").click(function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
//unset click event:
$(this).off();
});
another possibility is to use one():
The .one() method is identical to .on(), except that the handler is
unbound after its first invocation.
from the API: http://api.jquery.com/one/
$("#scroll").one('click', function() {
$('html,body').animate({
scrollTop: $("#what-is-it").offset().top},
'slow');
});
});
you wrote:
if already scrolled then on click button to don't scroll down?
unset your click function handler with the jquery onscroll function:
$(window).scroll(function() {
$("#scroll").off();
});
...if the user scrolls, this unsets your click event.
EDIT:
I've updated the code, you posted here and in the comment below:
//your scroll function
function scrollDown() {
$('html,body').animate({
scrollTop: $("#nav").offset().top
},'slow');
}
//set your handler on page load
$("body").on("click", "#scroll", scrollDown);
//scrol event handler
$(window).scroll(function() {
var navHeight = 300; // custom nav height
if($(window).scrollTop() > navHeight) {
$('#nav').addClass('goToTop');
//finish scroll animation
$('html,body').finish();
//set event handler to #scroll with your scroll function
$("body").off("click", "#scroll", scrollDown);
} else {
$('#nav').removeClass('goToTop');
//unset event handler
$("body").on("click", "#scroll", scrollDown);
}
});
So this sets your click event to the button, when your navbar is stick to the top and removes it when not.
And here is a link to an example fidde: http://jsfiddle.net/Lnq2etu9/3/

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

scrollTop: Smooth scroll to ID interferes with back to top

I'm a jQuery novice. I have two functions on the same page:
one which is a smooth scroll to an ID
the other which shows a "back to top" element after the user scrolls a set distance.
The functions work on their own, but when I combine them as shown below, the "back to top" function doesn't work.
I think I'm missing something obvious and could use some help.
Thanks!
Update: This fiddle shows the problem:
back to top jsfiddle
If the smooth scroll block is disabled, the back to top function works.
jQuery(document).ready(function(){
//smooth scrolling
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top -150}, 900, 'swing', function () {
window.location.hash = target;});
});
// Show or hide the back to top footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 900);
});
});

Hi #DavidCara Just add
<div id="top"></div>
after immediate <body> tag it'll defiantly work.
See updated jsfiddle Here

Use this simple code in html tags directly.
<a onclick="$('html, body').animate({scrollTop: 0}, 900);" href="javascript:;">back to top </a>

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.