Как перейти к тегу привязки в прокручиваемом элементе div, не опустив весь браузер?
Я создаю простой виджет глоссария как часть более крупного проекта для клиента. Содержимое глоссария заключено в прокручиваемый элемент div (переполнение: авто). С каждой буквой связан тег привязки (#a, #b, #c и т. Д.). Над прокручиваемым div находится div, который содержит каждую букву алфавита. Нажатие на одну из этих букв приводит пользователя к определениям этой буквы в прокручиваемом элементе div. Это работает, но непреднамеренный побочный эффект заключается в том, что все окно спускается к якору, что вводит в заблуждение и раздражает пользователя.
Вот виджет, немного урезанный и с кучей <br />
чтобы ты понял, что я имею в виду.
http://www.nitrohandsome.com/clients/topics/glossary-widget/
Я испробовал несколько разных идей javascript, которые я собрал вместе с некоторыми Google, но ничего не получалось, поэтому я просто избавился от всего, кроме фактического перехода к якорному коду (я довольно большой новичок в JS). Итак, прямо сейчас, нажатие на любую из букв выполняет эту функцию javascript с переданным ей тегом привязки:
function jumpToAnchor(myAnchor) {
window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
}
Как я могу выполнить это, чтобы общее окно не перепрыгивало при каждом нажатии на ссылку?
Заранее спасибо!
2 ответа
Если вы используете jQuery, вы можете попробовать плагин scrollTo. Кроме того, чтобы изменить только часть хэша или URL, вы можете просто сделать
function jumpToAnchor(myAnchor) {
window.location.hash = myAnchor;
}
Попробуйте использовать IFrame вместо Div или создать специальную функцию с помощью ScrollBy.