滚动到“返回顶部"时,获取div以显示/隐藏.关联 [英] Get div to show/hide when scrolling for a "back to top" link
问题描述
例如,我无法使转到顶部" id=arrow-up
div消失.页面顶部.
在页面顶部,我得到了
所以我希望arrow-up
div不在页面顶部时.
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-top').fadeIn();
} else {
$('.back-top').fadeOut();
}
});
// scroll body to 0px on click
$('.back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1600);
return false;
});
});
var tmp = $(window).height();
Tmp
用于获取视口高度...不确定是否正确吗?
我看过其他解决方案,但它们只是相同的一种...而我无法使其工作,它们的字体也使用:in-viewport
.我可以在视口中进行拍摄还是侧面跟踪?
<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");
}
});
因此,我希望在不打开时将div箭头向上显示(show("slow")) 页面顶部"
我这样做:
http://jsfiddle.net/wf_4/GubeC/
脚本:
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('.back-top').fadeIn();
} else {
$('.back-top').fadeOut();
}
});
// scroll body to 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>
I can't make my "go to top" id=arrow-up
div to disappear when on e.g. top of the page.
At the top of the page I got
So I would like the arrow-up
div to visible(show("slow"))
when not on top of the page.
var tmp = $(window).height();
Tmp
is used to get the viewport height... Not sure if that is right?
I have seen other solutions but they are only kind of the same... and I can't make them work, also they font use :in-viewport
. Can I make it with viewport or am I 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 I would like the arrow-up div to visible(show("slow")) when not on top of the page"
I do that this 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 to 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>
这篇关于滚动到“返回顶部"时,获取div以显示/隐藏.关联的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!