javascript - JQuery 无法尝试滚动到 "display: block"

标签 javascript jquery html css scroll

我这里有这个简单的代码来使 div 可见(从 display:none; 到 display:block;)

我已经在 J​​SFiddle 中测试过它并且它有效,但在我的本地主机中没有。我认为这是来自脚本标签的东西。

我可以在我的 Localhost wamp 服务器上使用 F12 看到 css 和 js 文件,但它不起作用。 谢谢。

HTML:

<html>
 <head>
  <title>Untitled Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/up.js"></script>
  <link href="../css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
  <div id="scroll_top">Hello World</div>
  <div class="container">
   <?php include("includes/header.php");?>
   <div class="content">
    <?php include("includes/navigation.php");?>
     <div class="main_content">
     </div>
    </div>
    <?php include("includes/footer.php"); ?>
   </div>
 </body>
</html>

CSS:

#scroll_top{
    position:fixed;
    display:none;
    background-color:#FFF;
}

JS:

var $logo = $('#scroll_top');
$(document).scroll(function() {
    $logo.css({display: $(this).scrollTop() > 100? "block":"none"});
});

这是 Roko C. Buljan 的 JSFiddle,位置固定并且可以工作。 http://jsfiddle.net/psvn9/400/

最佳答案

Check for demo

var $logo = $('#scroll_top');
    $(document).scroll(function() {
        if($(this).scrollTop()> 100)
        {   //alert("scop");
     //  $logo.css({display: $(this).scrollTop() > 100? "block":"none"});
         $('#scroll_top').css("display", "block");
        }else{
             $('#scroll_top').css("display", "none");
        }

    });

关于javascript - JQuery 无法尝试滚动到 "display: block",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23041194/

相关文章:

html - 当用户的屏幕小于持有 wrapper 时背景图像问题

javascript - jQuery 元素创建,值传递

javascript - 访问组件内的函数?

javascript - 将信息从 PHP 传递到 JQUERY 的方法?

javascript - 将字符串作为 javascript 函数执行

html - 如何使选择列表中的文本居中

javascript - 读取拖放文件

javascript - 将响应式文件管理器与tinymce结合使用 - 创建用户 session

javascript - 将数据从模态传递到主 Controller -(附有Plunker)----在模态中包含自动完成输入框

javascript - Jquery:如何发送一个 ajax 请求并为另一次调用保存 JSON 字符串