Question

我有一个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

Answer 1

好的，首先，你的小提示显示控制台错误。 $ .scrollTo不是一个函数。也许你没有导入一个库，或者可能只是因为它不在小提琴库中？无论哪种方式......

您可以将$.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);
        });
    }
});

应该在展开请求的问题的情况下加载页面。首先它会滚动，然后展开。

如果这不是你想要的，请告诉我。

在同一个班级中选择div

1 个答案: