当滚动查看“回到顶部”时，让div显示/隐藏。链接 [英] Get div to show/hide when scrolling for a "back to top" link

问题描述

我不能让我的跳转到顶部 id = arrow-up div在开启时消失。页面顶部。

在页面顶部，我得到了

所以我会如不在页面顶部时，如向上箭头 div到 visible（show（slow））。

  var tmp = $（window）.height（）; 
  

Tmp 用于获取视口高度...不知道这是对的吗？

我已经看到其他解决方案，但它们只是一样的......我无法让它们工作，他们的字体也使用：in-viewport 。

 < script type =text / javascriptsrc =http可以使用viewport进行跟踪吗？ ：//code.jquery.com/jquery-latest.min.js> < /脚本> 
< 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> 
 
 
 $ b $（window）.scroll（function（）{
 if（$（'＃pageStart：in-viewport（tmp）'））{
 $（＃arrow-up）。hide（slow）; 
} else {
 $（＃arrow-up）。show（slow）; 
} 
}）; 
  

解决方案

如不在
页面顶部的箭头向div可见（show（slow））

我这样做：

http：//

脚本：

（$（this）.scrollTop（））返回
$（$）; $ c $ // $ fade in＃back-top
$（function（）{
$（window）.scroll（function（）{
if > 300）{
$（'。back-top'）。fadeIn（）;
} else {
$（'。back-top'）。fadeOut（）;

$）

//点击
$（'。back-top'）将body滚动到0px。click（function（）{
$（'body，html'）。animate（{
scrollTop：0
}，1600）;
return false;
}）;
}）;

CSS

  .back-top {
 width：25px; 
 height：25px; 
背景：＃ff0000; 
位置：固定; 
 bottom：68px; 
 right：5px; 
 display：none; 
不透明度：0.8; 
 
  

HTML

 < div class =back-toptitle =页首>< / 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屋！