动画 .scrollTop

Question

When I click, I trigger .scrollTop and it seems to work. But page goes up/down directly. How to animate this? So user can really understand whats happening. I need to animate this piece of code: jQuery(window).scrollTop(jQuery(".tabs").offset().top);

Whole Java Script:

jQuery(document).ready(function() {

jQuery('.tabs .tab-links a').on('click', function(e)  {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
   jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400); 

   console.log(currentAttrValue);
    jQuery(window).scrollTop(jQuery(".tabs").offset().top);
    jQuery(".tab-links li").removeClass("active");
    jQuery('a[href="'+currentAttrValue+'"]').parent('li').addClass('active');

   e.preventDefault();
});

});

HTML:

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>  

    <div class="tab-content">

        <div id="tab1" class="tab active">
                 <div id="lipsum">Long content</div>
        </div>

        <div id="tab2" class="tab">
                 <div id="lipsum">Long content</div>
        </div> 

    </div>

    <div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>
</div>
</div>

jsFiddle:

http://jsfiddle.net/4m2ut16k/12/

Answer 1

use jquery animate method for animation effect.

jQuery('.tabs ' + currentAttrValue).slideDown(1000,function() {
       jQuery(this).animate({opacity: '0.5'});
}).siblings().slideUp(1000,function(){
    jQuery(this).animate({opacity: '0.5'});   
});

Live link http://jsfiddle.net/4m2ut16k/12/

Answer 2

You need to use animate() like,

jQuery('html,body').animate({ // html,body not window
                 'scrollTop':jQuery(".tabs").offset().top
           },1000); //1000 is duration here

Live Demo

Update if the tabs already visible then animate only like,

// Show/Hide Tabs, if visible then animate
if (jQuery('.tabs ' + currentAttrValue).is(':visible')) {
  jQuery('html,body').animate({
       'scrollTop': 0  // scroll to 0 to make it consistent for both tabs
  }, 1000);
} else {
   jQuery('.tabs ' + currentAttrValue).slideDown(400)
                                      .siblings().slideUp(400);
}

Updated Fiddle

Another updated, you need to check the height of siblings with the current one and then check for scroll top position like,

var $curr=jQuery('.tabs ' + currentAttrValue),
    $sib=jQuery('.tabs ' + currentAttrValue).siblings();
// Show/Hide Tabs, slidedown then animate       

if($curr.height() < $sib.height()){
    if(jQuery('html,body').scrollTop() == 0){
        $curr.slideDown(400).siblings().slideUp(400);
    } else {
        jQuery('html,body').animate({
            'scrollTop': 0
        }, 1000);
        $curr.show().siblings().hide();
    }     

} else {        
    $curr.slideDown(400,function(){
        jQuery('html,body').animate({
            'scrollTop': 0
        }, 1000);
    }).siblings().slideUp(400);
}

Another Updated Fiddle

Answer 3

你可以使用 JQuery 的animate方法也检查这个例子**jsFiddle:** http://jsfiddle.net/gxkuS/176/