Question

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

带图形的顶部：

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

Answer 1

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

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

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

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

希望我理解你的问题。

jQuery从div滚动

1 个答案: