Show elem only if content of page is taller than viewport

hi,

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…

HI there maya90,

here is one possible solution…

[code]

untitled document html,body { margin:0; height:100%; background-color:#f0f0f0; } #top { display:block; height:10px; } #container{ position:relative; width:75%; padding:20px 20px 40px; margin:auto; border:1px solid #999; border-radius:10px; background-color:#fff; box-shadow:inset 0 0 20px #999, 6px 6px 6px #999; color:#666; } #gototop { position:absolute; right:20px; bottom:20px; padding:2px 10px; 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); } .hide { display:none; }

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.

top
[/code]

coothead

If you wanted a Jquery verision - https://markgoodyear.com/labs/scrollup/

thank you coothead and bluedreamer…

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… :frowning:

<!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…:wink:

thank you very much…

(PS: show/hide content is always elem ‘section’)

Here is my understanding to the problem, you want to show the top button if page has scrollable area i.e. more content then viewport height.

Below script block may be of some use to get your issue resolved -

    /* replace class identifier from "scroll-to-top" with "gototop" */
    var handler = '.scroll-to-top';
    if ($(handler).size()) {
	$(window).scroll(function() {
	    if ($(handler).scrollTop() > 200) {
	        $(handler).fadeIn(200);
	    } else {
	        $(handler).fadeOut(200);
	    }
	});
	$(handler).click(function(event) {
	    event.preventDefault();
	    $('html, body').animate({
	        scrollTop: 0
	    }, 100);
	});
}

Would appreciate if you setup fiddle or code pen for your code. That really saves lot of time. http://jsfiddle.net http://codepen.io

Best,
~ LY

thank you Lokesh…

studying your code…

here’s my fiddle:

(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…

thank you…

hmmm… no solution, I guess? :frowning:

posting this mainly so this thread doesn’t close soon…

thanks…

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.

Forcing a download of scripts for something so simple is worse than not having a top link at all, imho.

I guess so… loading a somewhat massive plugin for this seems a little like overkill… oh well, too bad… I really wanted to see if I could do this…

I really wish Javascript would detect changes in dimensions of elements when this changes dynamically… oh well… can’t have everything…;~))

thank you…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.