jQuery：单击（）滚动特定的div并隐藏顶部div
[英]Jquery: Click () to scroll specific div and hide top div
问题描述
代码示例：
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隐藏状态，并且滚动效果正在起作用。 但是#intro div内容在左侧隐藏，而在#intro隐藏且滚动效果未定位到目标ID的右侧。 它与目标div的差距很大。 我该如何正常工作？
2 个解决方案
解决方案1
1 2015-10-09 13:14:42
您在JavaScript中编写了#fullsite ，但在HTML中编写了<div class="fullsite"></div> 。 您需要将HTML更改为<div id="fullsite"></div> 。
intro同样的错误。
请记住：要访问ID，您应在#前面加上前缀，对于类，应使用. 。
您可以在此处了解有关选择器的更多信息： http : //api.jquery.com/category/selectors/basic-css-selectors/
在您的情况下，我更喜欢基于“ id”而不是基于“ classs”的解决方案。 实际上，任何有效的HTML文档都可以使用相同的类包含许多元素，但不应包含具有相同ID的更多元素。 这意味着$（“。aaa”）将返回包含任何具有aaa类元素的列表，但是$（“＃aaa”）将返回唯一具有aaa id的元素。
解决方案2
0 2015-10-09 13:29:14
这就是您想要运行代码的方式
$("#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？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.