javascript - Get div to show/hide when scrolling for a "back to top" link -
i can't make "go top" id=arrow-up div disappear when on e.g. top of page.
at top of page got
so arrow-up div visible(show("slow")) when not on top of page.
var tmp = $(window).height(); tmp used viewport height... not sure if right?
i have seen other solutions kind of same... , can't make them work, font use :in-viewport. can make viewport or side tracked?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script> <script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <script src="/jquery/isinviewport.min.js"></script> $(window).scroll(function() { if($('#pagestart:in-viewport(tmp)')){ $("#arrow-up").hide("slow"); }else{ $("#arrow-up").show("slow"); } });
"so arrow-up div visible(show("slow")) when not on top of page"
i way:
http://jsfiddle.net/wf_4/gubec/
script:
// fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrolltop() > 300) { $('.back-top').fadein(); } else { $('.back-top').fadeout(); } }); // scroll body 0px on click $('.back-top').click(function () { $('body,html').animate({ scrolltop: 0 }, 1600); return false; }); }); css
.back-top { width:25px; height:25px; background:#ff0000; position:fixed; bottom:68px; right:5px; display:none; opacity:0.8; } html
<div class="back-top" title="top of page"></div>
Comments
Post a Comment