0

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

带图形的顶部：

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

数据的底部：

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

4

1 回答 1

1

当用户单击图形上的某些内容时，您需要获取内容 div 的位置，然后将 body scrollTop 动画到该位置。

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

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

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

希望我能正确理解你的问题。

于 2013-10-07T19:18:44.867 回答