Прокрутка jquery в том же месте на странице

116
17

У меня есть карта изображений html и в зависимости от того, где вы нажимаете, прокручивается до разных мест на странице. У меня есть несколько div, которые я не могу дать id, поэтому я создал divs над каждым, у которого есть id, поэтому я могу прокручивать его.

<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. Переменная "place" - это строка, где бы они ни нажали, т.е. Nashville-TN. Он определен в карте изображения. FindPlace вызывается с использованием onclick в карте изображений html. Вот фрагмент html-карты:

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

Независимо от того, где я нажимаю, он прокручивается до того же места на странице. Любая помощь или советы приветствуются.

Моя основная проблема заключалась в том, что divs без идентификаторов имели стиль float: left, в то время как divs, которые я создал с идентификаторами, не поддерживали. Вот почему он прокручивается до того же места. Я исправил это, и это сработало.

спросил(а) 2015-08-26T23:41:00+03:00 4 года, 10 месяцев назад
1
Решение
55

Вы должны рассмотреть возможность использования offset(), который возвращает позицию относительно document:

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 чтобы этот второй пример работал.

ответил(а) 2015-08-26T23:55:00+03:00 4 года, 10 месяцев назад
39

Попробуйте изменить код на следующее. Обратите внимание, что я добавил элементы <a> внутри div и изменил атрибуты href чтобы они соответствовали именам новых <a> элементов.

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

...

<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="#nashville" target="_self" />
<area style="outline: none;" title="San Antonio, TX September 25, 2015" alt="" coords="444,497,468,518" shape="rect" href="#sanantonio" target="_self" />
<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>

ответил(а) 2015-08-27T00:47:00+03:00 4 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема