動畫.scrollTop

當我點擊，我觸發.scrollTop它似乎工作。但頁面直接上/下。如何爲此設置動畫？所以用戶可以真正理解發生了什麼。我需要動畫這段代碼：jQuery(window).scrollTop(jQuery(".tabs").offset().top);動畫.scrollTop

全Java腳本：

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/

來源

2015-09-01 Rough

提示：你可以寫'$（...）的''而不是jQuery的（...）'，這就是方式更舒服;） –

您需要使用animate()一樣，

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

Live Demo

更新，如果標籤已經顯現然後進行動畫只喜歡，

// 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

另一個更新，則需要檢查的兄弟姐妹的高度與當前的一個，然後再檢查滾動頂部位置等，

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); 
}

另一個Updated Fiddle

來源

2015-09-01 10:36:39

謝謝它的工作。但有一些問題。比方說，我將從底部標籤頁的tab2跳轉到tab1。如果tab2的內容比tab1的內容長，則頁面首先下降，然後上升。在這裏我試圖解釋[這裏]（http://jsfiddle.net/4m2ut16k/14/）有什麼辦法解決這個問題嗎？ – Rough

這是因爲'jQuery（'。tabs'+ currentAttrValue）.slideDown（400）.siblings（）。slideUp（400）;' –

，但沒有它們的選項卡拒絕更改內容。我發現有人有同樣的問題[這裏]（http://stackoverflow.com/questions/14131325/jquery-scroll-to-top-with-animate-jumps-to-bottom-first）不能應用它雖然我的代碼。 – Rough

您可以使用jQuery的animate方法還要檢查這個例子**jsFiddle:**http://jsfiddle.net/gxkuS/176/

來源

2015-09-01 10:44:37

動畫效果使用jQuery動畫的方法。

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

活鏈接http://jsfiddle.net/4m2ut16k/12/

來源

2015-09-01 10:46:29

回答

相關問題