Как перейти к определенному элементу на странице?

На моей странице HTML я хочу, чтобы "перейти к" / "прокрутить" / "сфокусировать на" элемент на странице.

Обычно я использую якорный тег с href="#something", но я уже использую событие hashchange вместе с плагин для BBQ для загрузки этой страницы.

Итак, есть ли другой способ, через JavaScript, чтобы страница перешла на данный элемент на странице?

Вот основной план того, что я пытаюсь сделать:

function focusOnElement(element_id) {
     $('#div_' + element_id).goTo(); // need to 'go to' this element
}

<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>

Ответы

Ответ 1

Стандартная техника в форме плагина будет выглядеть примерно так:

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);

Тогда вы можете просто сказать $('#div_element2').goTo();, чтобы перейти к <div id="div_element2">. Обработка параметров и их конфигурирование оставляются в качестве упражнения для читателя.

Ответ 2

Если элемент в настоящее время не отображается на странице, вы можете использовать собственный метод scrollIntoView().

$('#div_' + element_id)[0].scrollIntoView( true );

Где true означает выравнивание по верхней части страницы, а false - снизу.

В противном случае можно использовать a scrollTo() плагин для jQuery, который вы можете использовать.

Или, может быть, просто получите элемент top position() (docs), и установите scrollTop() (docs) в эту позицию:

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

Ответ 3

document.getElementById("elementID").scrollIntoView();

То же самое, но обертывание его в функцию:

function scrollIntoView(eleID) {
   var e = document.getElementById(eleID);
   if (!!e && e.scrollIntoView) {
       e.scrollIntoView();
   }
}

Это даже работает в IFrame на iPhone.

Пример использования getElementById: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

Ответ 4

вот простой javascript для этого

вызовите это, когда вам нужно прокрутить экран до элемента с id = "yourSpecificElementId" 

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

и вам нужна эта функция для работы:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

экран будет прокручиваться до вашего конкретного элемента.

Ответ 5

Чтобы перейти к определенному элементу на вашей странице, вы можете добавить функцию в свой jQuery(document).ready(function($){...}) следующим образом:

$("#fromTHIS").click(function () {
    $("html, body").animate({ scrollTop: $("#toTHIS").offset().top }, 500);
    return true;
});

Он работает как шарм во всех браузерах. Отрегулируйте скорость в соответствии с вашими потребностями.