Develop Reference

how can i redirect on another page on scroll down

$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//infinite scrolling is the idea
}
});
<div id="scrollwork" class="scroll-padder">
</div>
This is my div tag. I want to make scroll on homepage and when i scroll down i want to redirect on page work.html with the use of java script

document.getElementById("scrollwork").onscroll=function(){window.location=redirecturl}

Jquery Hide header at first and show it on scroll up

Here’s a demo page.
https://codyhouse.co/demo/full-screen-pop-out-navigation/index.html
How to hide the header when the screen is on the top of the page, and it will only show on scroll up

hi try following...
$(window).scroll(function() {
var _hideVal = 50; //You can change this value...
if ($(window).scrollTop() > _hideVal)
{
$('.header-holder').fadeIn();
}
else
{
$('.header-holder').fadeOut();
}
});

Hide div when user reaches the bottom of page

I want to hide a div element when user scrolls and reaches the bottom of the page and display it again when the user scrolls back up. For example consider the following navigation bar which is named "nav".
HTML
<div class="nav"></div>
CSS
.nav{
width:100%;
height:50px;
position:fixed;
}
I want to hide the nav div element when scroll reaches bottom of the webpage. How can I make this possible. Can I use CSS for this or should I use JavaScipt instead.

HTML
<div id="nav"></div>
JS
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('nav').style.display='none';
}
}
Fiddle: https://jsfiddle.net/k77fdzyu/1/

If you want the element to re-appear, include an else statement with display='block';:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('nav').style.display='none';
}else{
document.getElementById('nav').style.display='block';
}
}

You can achieve this easily with jQuery as follows:
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
if (jQuery('body').height() <= (jQuery(window).height() + jQuery(window).scrollTop())) {
jQuery('.nav').hide();
}else{
jQuery('.nav').show();
}
});
});

Scrolling to top of hidden div

I'm trying to scroll a div to the top while it is hidden. Here's my sample code:
function slideUpReset(div) {
$(div).slideUp('fast', function() {
$(div).scrollTop(0);
});
}
But this doesn't work. $(div).scrollTop(0) only works when the div isn't hidden. Is there a way I can achieve the effect I want?

All you have to do is wrap the hidden div in another div then scroll to that
eg:
<div id=wrapperdiv> ** your hidden div ** </div>
then update your jquery to scroll to this div
function slideUpReset(div) {
$(div).slideUp('fast', function() {
$(div).parent().scrollTop(0);
});
}

Try this:
if($('#div').prop('display')=='none')
{
$('#div').scroll();
$("#div").animate({ scrollTop: 1000 }, 2000);
}

Push footer to bottom when page is not full

I'm developing a mobile web app. This is the main structure from top to bottom: header div, menu div, content div, footer div. The header, menu and footer are constant and pages are loaded into the content div using ajax.
Some of the pages have lots of content and they fill out the page so scroll is needed. Some of the pages have only one or two lines of content so they leave a big empty part (Not necessarily different pages - one page for example shows a list of orders, you can have no orders and you can have hundreds...).
This is what i want to achieve: If the page is not full with content, the footer will be in the bottom of the page. If the page is full and scroll is needed, the footer will be immediately after the content (so you scroll down the page and in the end you reach the footer).
The sticky footer solutions are not good for me because i don't want the footer to stick to the bottom always, only when the page is not full of content.
Is there anyway to achieve that? Thanks.

Then you have to use javascript for that - calculate the height of the content - substract it from the window height and set the margin-top of the footer from that distance:
jsfiddle
jsfiddle show
HTML
<div id="header" class="header">Header</div>
<div id="content" class="content">Content</div>
<div id="footer" class="footer">Footer</div>
JS (This example uses jQuery, it should be included before this script.)
$('#footer').css('margin-top',
$(document).height()
- ( $('#header').height() + $('#content').height() )
- $('#footer').height()
);
You can put an onresize window that call this function on any resize of the window.
[edit blag :]
Here is the onResize method (but with a min-height and not a margin-top)
Check the JSFiddle
// function to set the height on fly
function autoHeight() {
$('#content').css('min-height', 0);
$('#content').css('min-height', (
$(document).height()
- $('#header').height()
- $('#footer').height()
));
}
// onDocumentReady function bind
$(document).ready(function() {
autoHeight();
});
// onResize bind of the function
$(window).resize(function() {
autoHeight();
});
Borders, padding and margin
If you want to have borders and padding included in the calculation you can use outerHeight() instead of height(). Alternatively outerHeight(true) also includes margins.

A CSS Sticky footer should solve your problem.
Here's an example
That is super easy to setup and use. It will force the footer down the page with the content, and if the content isn't big enough to fill the page it will stick to the bottom.

function autoHeight() {
var h = $(document).height() - $('body').height();
if (h > 0) {
$('#footer').css({
marginTop: h
});
}
}
$(window).on('load', autoHeight);

The following solution works for me, based on the answer from Александр Михайлов. It finds the bottom of the footer and determines if it is less than the document height and uses top margin on the footer to make up the shortfall. This solution might give issues if your content is being resized on the go.
$(function () {
updateFooterPosition();
});
$(window).resize(function () {
updateFooterPosition();
});
function updateFooterPosition() {
var bottomOfFooter = $('footer').offset().top + $('footer').outerHeight(true);
var heightShortage = $(document).height() - bottomOfFooter;
if (heightShortage < 0) heightShortage = 0;
$('footer').css('margin-top', heightShortage);
}

Here's the solution i came to on my project
function autoHeight() {
if ( document.body.clientHeight < window.innerHeight ) {
document.querySelector('#footer').style.position = 'absolute';
document.querySelector('#footer').style.bottom = '0';
}
}
document.addEventListener("DOMContentLoaded", function() {
autoHeight();
});

This solution worked for me. I think this is perfect if you have more than only a #header and #footer. It just push the content down with a padding-bottom if body is smaller than the viewport.
function autoHeight() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
var gap = vwptHeight - bodyHeight;
if (vwptHeight > bodyHeight) {
$("#content").css( "padding-bottom" , gap );
} else {
$("#content").css( "padding-bottom" , "0" );
}
}
$(document).ready(function() {
autoHeight();
});
$(window).resize(function() {
autoHeight();
});