Remain in bottom while animating footer - javascript

I have a footer#footer which contains company location. When I load contact page with hash #locationjavascript scrolls to the bottom of the page, and makes a callback to enlarge the footer, as it is the important element. How do I increase the size of the footer while the page remains at the bottom (so it seems like footer pushing up the content).
var hash = window.location.hash;
if (hash=="#location") {
var scrollpos = $(document).height()-$(window).height()+"px"
$("body,html").delay(200).animate({
scrollTop: scrollpos
}, "slow", function() { exfoot() });
}
function exfoot(){
var $f = $("footer#footer");
$f.animate({
height: $f.height()*2
}, "slow");
}

I added this to the function
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
so it looks
function exfoot(){
var $f = $("footer#footer");
$f.animate({
height: $f.height()*2
}, "slow");
$("html, body").animate({ scrollTop: $(document).height() }, "slow");
}
Both the speed of the $f.animate and body,html.animate have to be the same, so they act simultaneously.

Related

JQuery - offset.top - add 80px to returned value

So I have a website where I have smooth scrolling implemented. When the user clicks the link to some position on my page, the animation is executed to target's offset.top I need to add 80px to this value and then scroll to this element.
Here is the code I'm using right now:
$(document).ready(function() {
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function() {
window.location.hash = hash;
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should be as simple as
scrollTop: $(hash).offset().top + 80

jquery auto scroll website with pause

How can I set jQuery auto scroll web page and with pause / stop for a specific px and continue auto scrolling? It's something like a user scrolling on the web page reading an article, like scroll and stop and continue scrolling something like that. I can't seem to find a good example on the internet and all I got the answer from searching is only jQuery auto scroll example only.
If you can't understand my question it's something looks like this: Example from codepen
Here is my code:
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 1000); // 1000 is the duration of the animation
},500);
setInterval(function(){
$("html, body").animate({ scrollTop: $(document).height() }, 500); // Speed from Bottom to top
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 5000); // Speed from Top to bottom
},500); // What is this speed refer to?
},1000); // What is this speed refer to?
By the way, I am new in jQuery, do you mind explain a little bit to me what is the meaning of both of the 500 and 1000 second meaning? I know it refers to second but what is the meaning of adding 2 of it? Thanks!
Here is an working example
setInterval(function scroll() {
$("section").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500); // First value is a speed of scroll, and second time break
});
setTimeout(function() {
$('html, body').animate({
scrollTop: 0
}, 5000); // This is the speed of scroll up
}, 4000); //This means after what time should it begin (after scrolling ends)
return scroll;
}(), 9000); //This value means after what time should the function be triggered again
//(It should be sum of all animation time and delay) 9000 = 5000 + 4000
main {
background: #EEE;
}
main section {
background: #DDD;
width: 90%;
margin: 30px auto;
padding: 10px 15px;
min-height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</main>
EDIT
I edited a little bit snippet so that the code was not twice. I declare function (scroll()) and use it inside interval. Thanks to that there is no need for the same code at the begining.
EDIT2
If you want the scroll to stop depending on px and not section just change this:
setInterval(function scroll() {
$("section").each(function(i, e) {
$("html, body").animate({
scrollTop: $(e).offset().top
}, 500).delay(500); // First value is a speed of scroll, and second time break
});
...
To this:
setInterval(function scroll() {
for (var i = 0; i < 4000; i += 800) {
$("html, body").animate({
scrollTop: i
}, 500).delay(500);
}
...
EDIT3
If you want to scroll to bottom at the end, you can do it like this:
setInterval(function scroll() {
for (var i = 0; i < 4000; i += 800) {
$("html, body").animate({
scrollTop: i
}, 500).delay(500);
if (i + 800 >= 4000) {
$("html, body").animate({
scrollTop: $(document).height()
}, 500).delay(500);
}
}
...

My animations arent working as expected

im trying to fade in a video after 5 seconds, then fade out a video after pressing a button, which then scrolls the page to the next section.
At the next section, it should animate some divs, then....pressing the button to go to the next section, fade out animates the previously animated divs, THEN goes to the next section.
The 3rd scroll button doesn't work at all.
Only the last 2 scroll buttons work....I can't figure out why only these last 2, and not the first 3 week.
NOTE: Id also like to kill the scrollbar on the page, and have the page navigated via the scroll buttons. Here is my code that is giving me trouble:
<script>
$(document).ready(function(){
//Kill Page Scrollbar
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
//animate the registration video fading in
$('#Video').fadeTo(3000, 1);
//Make scrollbutton clickable
$('.ScrollButton_White1').click(function(){
//Fade Video out
$('#Video').fadeTo(3000, 0), (function(){
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
});
<!--scroll button 2-->
$('.ScrollButton_Gold1').click(function(){
diamonds.hide();
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 3-->
$('.ScrollButton_White3').click(function(){
$('html, body').animate({
scrollTop: $("#ReturnChampion_AnchorPoint").offset().top
}, 5000
);
});
<!--scroll button 4-->
$('.ScrollButton_Gold1').click(function(){
$('html, body').animate({
scrollTop: $("#YouAskedForIt_AnchorPoint").offset().top
}, 5000);
});
<!--scroll button 5-->
$('.ScrollButton_Gold2').click(function(){
$('html, body').animate({
scrollTop: $("#WhatYouWillLearn_AnchorPoint").offset().top
}, 5000);
});
<!--animate presenter diamond buttons-->
<!--$(window).scroll(function(event) {
<!--$('#Diamond_DarrenHardy').addClass('animate_rf');
<!--$('#Diamond_RobertKiyosaki').addClass('animate_rf');-->
<!--});
<!--end jquery script-->
});
</script>
You appear to have a typo in your code
$('#Video').fadeTo(3000, 0), (function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});
At $('#Video').fadeTo(3000, 0), (function() { If you are looking to use the callback functionality of fadeTo it should be
$('#Video').fadeTo(3000, 0, function() {
//define the variable "diamonds"
var diamonds = $('#PresenterContainer').children()
//animate the scrolling of the page down to the anchor point//
$('html, body').animate({
scrollTop: $("#PresenterContainer_AnchorPoint").offset().top
}, 5000,
function() {
diamonds.show();
});
});

how to Scroll to the end of a div in a single scroll

I have a div with 100% height of the screen and i want it to scroll like this website. One little scroll should take me to the end of a division.
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
I was using this code but its not working. Help
This code should works:
$( "body" ).scroll(function() {
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
});

How to set up a #link to later on a page, but aligning the target with the bottom of the screen

I want to click the about section on my new website and when it scrolls down, instead of it sliding the about section up and aligning the top of the "about" section with the top of the screen, I want to align the bottom of the "about" section with the bottom of the screen.
I'm not sure if this has to be done with javascript or if it can be done with HTML. What are your thoughts?
Here is the function used to scroll to the top. ( Here Is A JSFiddle )
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Do I just change it to:
//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollBottom: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
There is no scrollBottom, so you'll need to calculate the appropriate scrollTop:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
var $section = $($anchor.attr('href'));
var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();
$('html, body').stop().animate({
scrollTop: scrollPos
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
http://jsfiddle.net/YjgdS/6/

Categories

Resources