代码示例:
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。
此时top #intro 隐藏，滚动效果生效。但是 #intro div 内容在左侧，当 #intro 隐藏时在右侧，并且滚动效果不是针对 id。它从目标 div 开始下降。我怎样才能正确地完成工作？
最佳答案
您写了 #fullsite在你的 javascript 中，但是 <div class="fullsite"></div>在你的 HTML 中。
您需要将 HTML 更改为 <div id="fullsite"></div> .
intro 的相同错误.
记住:要访问 ID，您应该使用 # 作为前缀, 对于类你应该使用 . .
您可以在此处阅读有关选择器的更多信息:http://api.jquery.com/category/selectors/basic-css-selectors/
在你的情况下，我更喜欢基于“id”而不是“classes”的解决方案。事实上，任何有效的 HTML 文档都可以包含许多使用相同类的元素，但不应该存在更多具有相同 ID 的元素。 这意味着 $(".aaa") 将返回一个包含任何具有 aaa 类的元素的列表，但是 $("#aaa") 将返回唯一具有 aaa 的元素编号。
关于javascript - Jquery:单击()滚动特定的div并隐藏顶部div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33039175/