Question

代码示例：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="intro">
    <a href="#" id="showfullsite"></a>
</div>

<div id="fullsite"></div>

</body>
</html>

jQuery：

$("#showfullsite").click(function() {

    $('html, body').animate({
        scrollTop: $("#fullsite").offset().top
    }, 2000);

    $('html, body').css('overflow', 'auto'); 
    $('#intro').hide(2000);

});

简单的CSS：

body {
overflow: hidden;
}

大家好，我不是jQuery专家。我是初学者。所以，我有一个问题。我有两个div包，一个用于介绍，一个用于完整站点。我正在制作这样的网站，当我在浏览器中打开我的网站时，只会看到顶部#intro div，并且隐藏整个网站。我正在使用overflow: hidden;隐藏计算机屏幕另一侧的所有内容。我在#intro div屏幕中有一个控件来解锁整个网站。因此，当我点击控件时，该网站将滚动到#full-site。我正在使用查询，我正在添加$('html, body').css('overflow', 'auto');来显示网站的隐藏部分。另外，我正在添加$('#intro').hide(2000);以隐藏顶部#intro。

此时顶部#intro正在隐藏，滚动效果正常。但是#intro div内容在#intro隐藏时左侧，右侧，滚动效果不是目标ID。它远离目标div。我该如何正确地完成工作？

Answer 1

您在javascript中写了#fullsite，但在HTML中写了<div class="fullsite"></div>。您需要将HTML更改为<div id="fullsite"></div>。

intro的错误相同。

请注意：要访问ID，您应该使用#作为前缀，对于应使用.的类。

您可以在此处详细了解选择器：http://api.jquery.com/category/selectors/basic-css-selectors/

在您的情况下，我更喜欢基于“id”的解决方案而不是“类”。事实上，任何有效的HTML文档都可以包含使用相同类的许多元素，但不应该存在具有相同id的更多元素。这意味着$（“。aaa”）将返回包含 aaa 类的任何元素的列表，但$（“＃aaa”）将返回 aaa 的唯一元素标识。

Answer 2

这就是你想要运行代码的方式

$("#showfullsite").click(function() {

  $('html, body').animate({
    scrollTop: $(".fullsite").offset().top
  }, 2000);

  $('html, body').css('overflow', 'auto');
  $('.intro').hide(2000);

});

.container {
  overflow: hidden;
  height: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="intro">
      <a href="#" id="showfullsite">go to fullsite</a>
    </div>

    <div class="fullsite">this is fullsite</div>
  </div>
</div>

Jquery：单击（）滚动特定div并隐藏顶部div

2 个答案: