I have a “to top” link at bottom of page that has to show or not show dynamically, depending on whether or not the top section (header) of the page is visible…
this changes dynamically, as I have some show/hide CTA’s on the page, and some of the show/hide content that appears is longer (taller) than other show/hide content… so sometimes after showing a given content the header will still be visible (i.e., within viewport) and sometimes it won’t…)
this “to top” link is hidden by default (in CSS), as it’s not needed when the page loads, as it consists of a few links and nothing else (so the “to top” link would be within the viewport if I show it on load); but I do need it to appear – without reloading the page – if, after showing some hidden content, when user scrolls to the bottom of the page the header (top) of the page is no longer visible (main question is: can jQuery detect whether or not an element is within the viewport without reloading the page, just b/c the height of the page has changed after showing some previously hidden content?)
i.e.: bottom line: “to top” link needs to appear only if entire content of the page is taller than the viewport – and this changes dynamically without reloading the page…
I have looked a no. of plugins, but have found solution with none of them…
thank you…
PS: posting screenshot to better illustrate issue…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim,
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat
massa sed congue. Sed eros nisl, volutpat ac dapibus quis,
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit.
Proin viverra, neque non eleifend vehicula, nulla augue gravida
felis, non fermentum lorem odio ac nunc. Aliquam pretium
scelerisque consectetur. Proin ultrices urna non magna interdum
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu
sodales cursus. Maecenas bibendum neque vitae orci mollis ac
vulputate ante auctor. Sed sodales odio id ante sagittis
faucibus.
so here’s what I’ve done based on your code, coothead (had to re-work it a bit because, as I explained in my OP, this (whether or not to-top link appears) has to change dynamically) but the to-top link now is not showing when the longer content appears…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>untitled document</title>
<style media="screen">
html,body {
margin:0;
height:100%;
background-color:#f0f0f0;
}
section {
display:none;
width:75%;
padding:10px;
margin:0 auto;
border:1px solid #999;
border-radius:10px;
background-color:#fff;
color:#666;
}
#gototop {
/* position:absolute;
right:20px;
bottom:10px;*/
margin-top:10px;
padding:2px 10px;
margin:5px 0;
border:1px solid #333;
border-radius:5px;
background-color:#eee;
background-image:linear-gradient(to bottom,#fff,#ccc);
font-size:100%;
color:#000;
text-decoration:none;
box-shadow:2px 2px 2px #999;
}
#gototop:hover {
border-color:#3c7fb1;
background-image:linear-gradient(to bottom,#fff,#9cddee);
}
#gototop {
display:none;
}
</style>
<script>
$(document).ready(function() {
$('a.show').click(function(e) {
e.preventDefault();
$('section').slideUp();
var parentID = $(this).parent().parent().attr('id');
$('div#' + parentID + ' section').slideDown('400');
// init();
if ( $('div#' + parentID + ' section').offsetHeight > document.body.offsetHeight) {
$('a#gototop').show(); // not getting triggered
} else {
$('a#gototop').hide();
}
});
});
</script>
</head>
<body>
<span id="top"></span>
<div class="wrapper" id="container1">
<p><a href="" class="show">do it</a></p>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi.
</p>
<p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim,
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat
massa sed congue. Sed eros nisl, volutpat ac dapibus quis,
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit.
Proin viverra, neque non eleifend vehicula, nulla augue gravida
felis, non fermentum lorem odio ac nunc. Aliquam pretium
scelerisque consectetur. Proin ultrices urna non magna interdum
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu
sodales cursus. Maecenas bibendum neque vitae orci mollis ac
vulputate ante auctor. Sed sodales odio id ante sagittis
faucibus.
</p>
</section>
</div>
<div class="wrapper" id="container2">
<p><a href="" class="show">do it</a></p>
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi.
</p>
</section>
</div>
<a id="gototop" href="#top">top</a>
</body>
</html>
what more do I need to do?
(would appreciate jQuery solution…
(this is for phone… div (actually <section>) that shows with first link (“Content1”) is tall enough that it’s taller than the window… and this applies to phone only… in tablet & computer all content will be visible on load…)
my problem here from day one has been: Javascript does not detect change in height of an element if it changes dynamically, and the page is not reloaded… (and of course once I reload the page, the show-hide content, i.e., the <section>'s, all disappear, as they’re all hidden by default…)
pls see screenshot in my OP… some of the show/hide content is short enough that once it appears I don’t need the “to top” link at bottom of page, but some of the content is tall enough that I do need “to top” link at bottom of page…
I like to keep things simple, personally, as it induces less retribution from the gods. So my my perspective, I’d say—
I don’t bother with Back to Top buttons, because (at least on iOS), you can jump back to the top by tapping the top of the screen, and on desktop (if you have an extended keyboard) there’s a back to top key as well. (If mobile users don’t know about that, then let 'em scroll, as a punishment for not learning how to use the device they paid for.)
And if you must have a back to top button off screen by default, it might be easier to hard code it and just place it outside a wrapper with min-height: 100vh;.
Forcing a download of scripts for something so simple is worse than not having a top link at all, imho.