我有一个 jquery 难题。有人可以帮我选择要滚动到的适当的 div 吗？现在它适用于第一个，但其他的则不起作用。这是代码:https://jsfiddle.net/fwm4ot69/
这是JS代码
$(document).ready(function() {
//hide answers or hide in css
$('.acc_content').hide();
$('.acctitle').click(function() {
//show this answer
$(this).next().slideToggle('1000');
//Hide the other panels
$(".acc_content").not($(this).next()).slideUp('fast');
$.scrollTo($(this), 1000);
});
});
这是我的html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.12.0.min.js">
</script>
<div class="accordion">
<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="acctitle">
<h3>What is This?</h3>
</div>
<div class="acc_content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</body>
</html>
What can i do to make the screen start on the selected question, esp on a mobile device?
THanks
最佳答案
首先，您的 fiddle 显示控制台错误。 $.scrollTo 不是函数。也许您没有导入库，或者可能只是因为它不在 fiddle 库中？不管怎样...
您可以将 $.scrollTo($(this), 1000); 更改为:
$('html,body').animate({scrollTop: $(this).offset().top}, 1000);
如果您console.log($(this).offset().top)，您将看到它返回一个有效的偏移量。只有当页面足够长才能滚动时，才会跳转到该部分，并且只会滚动到页面底部。
现在，您的问题似乎是在问如何在页面加载时跳转到问题。如果是这种情况，您可以尝试简单的方法...
html:
<div class="acctitle" id="question-1">
<h3>What is This?</h3>
</div>
然后您可以通过网址访问:www.somedomain.com#question-1
这将锚定到该 ID。但在js中你可以添加:
$(document).ready(function(){
if(window.location.hash)
{
$('html,body').animate({scrollTop: $(window.location.hash).offset().top}, 1000, function(){
$(window.location.hash).next().slideDown(1000);
});
}
});
它应该加载页面并扩展所请求的问题。首先它会滚动，然后展开。
如果这不是您想要的，请告诉我。
关于javascript - 选择同一类中的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35212977/