javascript - jquery 滚动到页面上的同一位置

Question

我有一个 html 图像 map ，根据您单击的位置，将滚动到页面上的不同位置。我有多个无法提供 id 的 div，因此我在每个具有 id 的 div 上方创建了 div，这样我就可以滚动到它。

<div id="Nashville-TN"></div>
<div class="speaking-date">...</div>
<div id="SanAntonio-TX"></div>
<div class="speaking-date">...</div>

等等。这是我用来滚动的:

function FindPlace(place){
var $j = jQuery.noConflict();
$j('html,body').animate({
scrollTop: $j("#"+place).position().top    
            }, 2000);                        
}

我使用 noConflict 因为它在 WordPress 中。变量“地点”是他们点击的地方的字符串，即 Nashville-TN。它在图像映射中定义。 FindPlace 在 html 图像映射中使用 onclick 调用。这是 html map 的片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="aligncenter size-full wp-image-9363 nopin" 
src="linkToPicture.png" alt="Alt text here" usemap="#usmap-withstars-011.png" 
width="979" height="688" border="0" /> 
<map id="ImageMapsCom-usmap-withstars-011.png" name="usmap-withstars-011.png">
    <area style="outline: none;" title="Nashville, TN September 24, 2015" alt="" coords="626,398,650,419" shape="rect" href="#September24.2015" target="_self" onclick="FindPlace('Nashville-TN')"/> 
    <area style="outline: none;" title="San Antonio, TX September 25, 2015" alt="" coords="444,497,468,518" shape="rect" href="#September25.2015" target="_self" onclick="FindPlace('SanAntonio-TX')"/> 
    <area style="outline: none;" title="Image Map" alt="Image Map" coords="977,686,979,688" shape="rect" href="http://www.image-maps.com/index.php?aff=mapped_users_0" /> 
</map>

无论我单击何处，它都会滚动到页面上的同一位置。如有任何帮助或提示，我们将不胜感激。

我的主要问题是没有 id 的 div 有 float:left 样式，而我用 ids 创建的 div 没有。这就是它滚动到同一位置的原因。我修复了这个问题并且成功了。

Answer 1

您应该考虑使用offset() ，它返回相对于文档的位置:

function FindPlace(place){
    jQuery('html,body').animate({
        scrollTop: jQuery("#"+place).offset().top    
    }, 2000);                        
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div onclick="FindPlace('Houston')">Click to Houston</div>
<div onclick="FindPlace('San-Francisco')">Click to San Francisco</div>

<div id="Houston" style="margin: 800px 0;">Houston Target</div>
<div id="San-Francisco" style="margin-bottom: 800px;">San Francisco Target</div>

编辑:

由于您使用的是 area 元素，因此无法使用 onclick 属性。不过，您可以设置这些元素的 href，并使用 .click() 事件:

<area href="#Houston" />

...和脚本:

jQuery('area').click(function(e){
    e.preventDefault();
    FindPlace(jQuery(this).attr('href'));
});

您需要删除 FindPlace 函数中的 # 才能使第二个示例正常工作。