Question

我想扩展点击部分，然后向下滚动。我的代码：

jQuery(document).ready(function( $ ){
  $(".cp_view_more_details" ).click(function() {
    $('.cp_expanded_view').slideToggle('2000', function(){
      $( ".cp_expanded_view" ).scrollTop( 300 );
    });
  });
});

它展开部分，但不向下滚动。我的控制台中没有任何错误。

如何向下滚动？

Answer 1

不完全确定，我认为你应该使用窗口而不是包装类

 jQuery(document).ready(function( $ ){
        $(".cp_expanded_view").hide();
     $( ".cp_view_more_details" ).click(function() {
        $('.cp_expanded_view').slideToggle('2000', function(){
                $(window).scrollTop( 300 );
           });
        });
   });

看到这个小提琴

http://jsfiddle.net/xc27avjL/6/

用简单的动画。你可以使用body或html

 jQuery(document).ready(function( $ ){
        $(".cp_expanded_view").hide();
     $( ".cp_view_more_details" ).click(function() {
        $('.cp_expanded_view').slideToggle('2000', function(){
                $('html,body').animate(
            {scrollTop :  300
            }, 'slow');
           });
        });
   });

在这里摆弄：http://jsfiddle.net/xc27avjL/8/

Answer 2

jQuery(document).ready(function( $ ){
  $(".cp_view_more_details" ).click(function() {
    $('.cp_expanded_view').slideToggle('2000', function(){
      var height = $(document).height();
    $('html, body').animate({ scrollTop: height  }, 300 );
    });
  });
});

我使用了一个变量作为文档高度，然后使用了animate scrollTop

jQuery扩展并向下滚动

2 个答案: