How to make a back-to-top link slide up to position X (footer top) when the bottom of the browser window is reached i.e. when the user has completely scrolled down the page?
Right now, my page has a functioning back-to-top link that is fixed to the window bottom. However, there's a footer at the end of the page and the back-to-top link needs to stay (or snap back) on top of the footer at the end of the page and not the browser window's bottom.
Toplink's script is:
//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.hide(); //in case the user forgot
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$('#top-link').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,500);
});
});
You can just check if the user scrolled down to bottom page like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
console.log("bottom reached");
}
});
If the bottom is reached, you could set the position of your link as you like it or animate it to jump a little up or something like that.