Как перейти к тегу привязки в прокручиваемом элементе div, не опустив весь браузер?

Question

Я создаю простой виджет глоссария как часть более крупного проекта для клиента. Содержимое глоссария заключено в прокручиваемый элемент 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;
  }

Как я могу выполнить это, чтобы общее окно не перепрыгивало при каждом нажатии на ссылку?

Заранее спасибо!

Answer 1

Если вы используете jQuery, вы можете попробовать плагин scrollTo. Кроме того, чтобы изменить только часть хэша или URL, вы можете просто сделать

function jumpToAnchor(myAnchor) {
   window.location.hash = myAnchor;
}

Answer 2

Попробуйте использовать IFrame вместо Div или создать специальную функцию с помощью ScrollBy.