Bootstrap中的jQuery scrollTop [英] jQuery scrollTop in Bootstrap

问题描述

你好我正在使用jQuery试图在点击#selector时滚动到#target div。这两个元素分别位于引导选项卡面板/选项卡窗格中。

似乎我无法在#target位于＃选择器的父级之外时使滚动效果生效Panel / Pane。

 < ul class =nav nav-tabsrole =tablist> 
< li role =presentationclass =active> 
< a href =＃homerole =tabdata-toggle =tab>< / a> 
< / li> 
< li role =presentation> 
< a href =＃profilerole =tabdata-toggle =tab>< / a> 
< / li> 
< li role =presentation> 
< a href =＃messagesrole =tabdata-toggle =tab>< / a> 
< / li> 
< li role =presentation> 
< a href =＃settingsrole =tabdata-toggle =tab>< / a> 
< / li> 
< / ul> 
 
< div class =tab-content> 
 
< div role =tabpanelclass =tab-pane fade in activeid =home> 
< div id =selector>< / div> 
< / div> 
 
< div role =tabpanelclass =tab-pane fadeid =profile> 
< div id =target>< / div> 
< / div> 
 
< div role =tabpanelclass =tab-pane fadeid =messages> ...< / div> 
 
< div role =tabpanelclass =tab-pane fadeid =settings> ...< / div> 
< / div> 
  

关于如何在不同标签中实现scrollTop效果的任何想法？我挂在Bootstrap CSS上了吗？替代建议？感谢您的时间。

继承JS，第一个函数仅根据选定元素的href更改选项卡。

< $（'data-toggle =tab]'）。on（'shown.bs.tab'）。pre> $（document）.ready（function（）{
$ '，function（e）{
var target = this.href.split（'＃'）;
$（'。nav a'）。filter（'a [href =＃'+ target ['1] +'']'）。tab（'show'）;
}）
$（'＃selector'）。click（function（e）{
e.preventDefault ）;
$（'html，body，nav'）。delay（500）.animate（{
scrollTop：$（＃target）。offset（）。top
}， 500）;
}）;
}）;


解决方案

使用。closest （获取父级）获取放置 #target div的选项卡。然后打开该选项卡。然后使用动画滚动到顶部。

而不是使用 .delay（）我使用了setTimeout，因为动画会在打开标签之前发生，不需要。

  $（document）.ready（function（）{
 $（'a [data-toggle （'shows'）'）。on（'shown.bs.tab'，function（e）{
 var target = this.href.split（'＃'）; 
 showTab（target [1 （）; 
 $）
 $（'＃selector'）。click （'.id'）; 
 showTab（target）; 
 setTimeout（function（）{
 $（'html，body （
 scrollTop：$（＃target）。offset（）。top 
}，500）; 
}，500）; 
} ）; 
}）; 
 $ b $ function showTab（target）{
 $（'。nav a'）。filter（'a [href =＃'+ target +']'）。tab（'show ）; 
} 
  

以下是一个演示 http://jsbin.com/xomafe/edit?html,js,output

希望这有助于

Hello I am using jQuery in an attempt to scroll to the #target div when the #selector is clicked. The two elements are in seperate Bootstrap Tab Panels / Tab Panes.

It seems I am unable to get the scroll effect to work when the #target is outside the #selector's parent Panel/Pane.

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
    <a href="#home" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#profile" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#messages" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#settings" role="tab" data-toggle="tab"></a>
  </li>
</ul>

<div class="tab-content">

  <div role="tabpanel" class="tab-pane fade in active" id="home">
    <div id="selector"></div>
  </div>

  <div role="tabpanel" class="tab-pane fade" id="profile">
    <div id="target"></div>
  </div>

  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>

  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

Any ideas as to how I can achieve the scrollTop effect in a different tab? Am i getting hung up on the Bootstrap CSS? Alternative suggestions? Thanks for your time.

Heres the JS, the first function just changes tabs based on the selected element's href.

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = this.href.split('#');
    $('.nav a').filter('a[href="#' + target[1] + '"]').tab('show');
  })
  $('#selector').click(function(e) {
    e.preventDefault();
    $('html, body, nav').delay(500).animate({
      scrollTop: $("#target").offset().top
    }, 500);
  });
});

解决方案

Using .closest(which gets the parent) get the tab in which the #target div is placed. Then open that tab. Then scroll to top using animate.

Instead of using .delay() I used setTimeout because the animate will happen before the tab is opened which is not required.

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = this.href.split('#');
    showTab(target[1]);
  });
  $('#selector').click(function(e) {
    e.preventDefault();
    var target = $('#target').closest('.tab-pane').attr('id');
    showTab(target);
    setTimeout(function() {
      $('html, body, nav').animate({
        scrollTop: $("#target").offset().top
      }, 500);
    }, 500);
  });
});

function showTab(target) {
  $('.nav a').filter('a[href="#' + target + '"]').tab('show');
}

Here is a demo http://jsbin.com/xomafe/edit?html,js,output

Hope this helps

这篇关于Bootstrap中的jQuery scrollTop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！