jQuery从div滚动

所以我有一个图形，有很多可点击的区域，并显示下面的数据取决于你点击的位置。现在，客户希望拥有它也滚动到下面的数据，如果他们点击，所以我需要调整我的脚本包含此功能，但不知道如何去做：jQuery从div滚动

的顶部，GRAPHIC：

<div id="bam-container"> 
    <div class="gear-right-1" data-class="gear-right-1" data-alt-class="gear-right-1-alt" data-hover="true" data-info-prefix="bam-info-small-1"></div> 
    <div class="gear-right-2" data-class="gear-right-2" data-alt-class="gear-right-2-alt" data-hover="true" data-info-prefix="bam-info-small-2"></div> 
    <div class="gear-right-3-alt selected" data-class="gear-right-3" data-alt-class="gear-right-3-alt" data-hover="true" data-info-prefix="bam-info-small-3"></div> 
    <div class="gear-right-4" data-class="gear-right-4" data-alt-class="gear-right-4-alt" data-hover="true" data-info-prefix="bam-info-small-4"></div> 
    <div class="gear-right-5" data-class="gear-right-5" data-alt-class="gear-right-5-alt" data-hover="true" data-info-prefix="bam-info-small-5"></div> 
    <div class="gear-right-6-alt"></div> 

    <div class="gear-left-alt"></div> 
    <div class="gear-left-text-1" data-class="gear-left-text-1" data-alt-class="gear-left-text-1-alt" data-hover="true" data-info-prefix="bam-info-small-7"></div> 
    <div class="gear-left-text-2" data-class="gear-left-text-2" data-alt-class="gear-left-text-2-alt" data-hover="true" data-info-prefix="bam-info-small-8"></div> 
    <div class="gear-left-text-3" data-class="gear-left-text-3" data-alt-class="gear-left-text-3-alt" data-hover="true" data-info-prefix="bam-info-small-9"></div> 
</div>

用数据BOTTOM：

<div id="bam-items-container"> 
    <div id="bam-info-small-1-1" class="bam-title" style="display: none;">Discovery</div> 
<div id="bam-info-small-1-1" class="bam-info bam-insight" style="display: none;"> 
<div class="header">Insights</div> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis laoreet elit, ut tempus nulla. Suspendisse elit ligula, tempor in rhoncus id, consectetur id dui. Proin sed nibh quis urna hendrerit ornare sed et ligula.</p>

现状JS：

<script> 

var globalInfoPrefix = "bam-info"; 

$(function() { 

    var hoverItems = $("[data-hover='true']"); 

    $("[id^='" + globalInfoPrefix + "']").hide(); 

    hoverItems.hover(
     //handlerIn 
     function() { 
      var gear = $(this); 
      if(!gear.hasClass("selected")) { 
       var inactiveClass = gear.attr("data-class"); 
       var activeClass = gear.attr("data-alt-class"); 

       gear.addClass(activeClass); 
       gear.removeClass(inactiveClass); 
      } 
     }, 
     //handlerOut 
     function() { 
      var gear = $(this); 

      if (!gear.hasClass("selected")) { 
       var inactiveClass = gear.attr("data-class"); 
       var activeClass = gear.attr("data-alt-class"); 

       gear.addClass(inactiveClass); 
       gear.removeClass(activeClass); 
      } 
     } 
    ); 

    hoverItems.click(function() { 
     var gear = $(this); 
     var inactiveClass = gear.attr("data-class"); 
     var activeClass = gear.attr("data-alt-class"); 
     var prefix = gear.attr("data-info-prefix"); 



     hoverItems.each(function() { 
      var smallGear = $(this); 
      smallGear.removeClass("selected"); 
      smallGear.removeClass(smallGear.attr("data-alt-class")); 
      smallGear.addClass(smallGear.attr("data-class")); 
     }); 

     gear.addClass(activeClass); 
     gear.addClass("selected"); 
     gear.removeClass(inactiveClass); 

     $("[id^='" + globalInfoPrefix + "']").hide(); 
     $("[id^='" + prefix + "']").show(); 
    }); 
});

来源

2013-10-07 Chad

你只是想向下滚动到div？ – Adween

[jQuery滚动到元素]的可能重复（http://stackoverflow.com/questions/6677035/jquery-scroll-to-element） –

是Adween。感谢帕特里克，我试着看，但主要是指可聚焦的元素，而不是一个div。 – Chad

当用户点击你需要得到您的内容div的位置，然后动画身体scrollTop的那个位置图形的东西。

我创建了一个例子小提琴这里 - http://jsfiddle.net/taneleero/3EngC/

基本上你只需要在你的hoverItems.click事件函数添加以下代码：

$("html, body").animate({ 
    scrollTop: $('#bam-items-container').offset().top 
});

希望我正确理解你的难题。

来源

2013-10-07 19:18:44

谢谢我要试试这个。 – Chad

jQuery从div滚动

回答

相关问题