Question

我正在尝试从元素底部关闭slideToggle，然后将浏览器窗口滚动到其上方的标题。这就是我走了多远。

JavaScript

jQuery(".closedetails").click(function () {

    $closedetails = $(this);
    $morecontent = $(this).parents(".hotel");      
    // Close more content when clicked
    $morecontent.slideToggle(500, function () {
     if($morecontent.is(":visible")){
        $("html, body").animate({scrollTop: $morecontent.prev(".header").offset().top });
      }      

    });

});

HTML

<div class="header">
<h3>Hotel header</h3>
</div>

<div class="hotel">
<p>Springhill Suites by Marriott is a 3-star hotel located on the westside of Flagstaff near Northern Arizona University. This modern hotel offers large, stylish rooms with a comfortable seating and desk area. All rooms also include a trundle (pull-out) bed.</p>

<div class="more-container">
<div class="more-header">More details</div>
<div class="more-content" style="display: block;">
<div class="desc"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sollicitudin est. Nam id dolor mi. Integer nunc arcu, vehicula ac ligula eu, placerat sagittis eros. Duis consequat dolor quis luctus finibus. Nullam vel scelerisque tortor, quis vehicula sapien. Duis id venenatis dolor, nec ultricies quam. Proin faucibus, enim at lacinia aliquet, neque sem convallis arcu, vitae ullamcorper felis metus a nunc. Morbi enim felis, bibendum sit amet lorem a, iaculis tristique tortor. Nunc orci ex, pellentesque non purus sit amet, feugiat malesuada nulla. Mauris vel purus sem. Proin commodo nibh justo, vel interdum erat dignissim interdum. Suspendisse at magna nec est rutrum pretium ac sed turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo risus erat, et ultricies nisl commodo eu. Donec ut pharetra dui.</p>

<p>Donec feugiat lacus sapien, in cursus ex tristique eget. Sed sit amet ipsum leo. Cras aliquam ac nunc sed dapibus. In semper ullamcorper est, tempor ultrices elit fermentum ac. Suspendisse vel eros non mi porta dignissim. Morbi consectetur blandit enim ut finibus. Maecenas viverra lectus vel nisi dignissim, eget ultrices ante ultrices.</p>

<p>Cras eget justo aliquam, rhoncus mauris at, viverra enim. Nam sit amet quam nec mauris pellentesque dictum id a enim. Cras velit nisl, imperdiet a dolor quis, rhoncus tincidunt risus. Donec a orci augue. Suspendisse at augue at mauris bibendum euismod. Sed nec molestie tortor. Etiam nec volutpat dolor. Proin suscipit scelerisque lectus, a eleifend diam gravida eu. Phasellus viverra dolor magna.</p>

</div>
<div class="closedetails">CLOSE MORE DETAILS </div>
</div>
</div>
</div>

http://jsfiddle.net/agileapricot/kEqVc/55/

Answer 1

您将获得一个怪异的效果，即向上滑动然后在回调中再次滑动。虽然你走了...

    jQuery(".closedetails").click(function () {
        $closedetails = $(this);
        $morecontent = $(this).parents(".hotel");      
        // Close more content when clicked
        $morecontent.stop(true).slideUp(100,function () {
        $("html, body").stop(true).animate({scrollTop: $morecontent.prev(".header").offset().top }, 300);
    });

jQuery slideToggle，然后scrollTop不起作用

1 个答案: