جافاسكريبت - كيف يمكن الانتقال إلى عنصر محدد في الصفحة؟

في صفحة HTML الخاصة بي، أريد أن أتمكن من 'الذهاب إلى'/'التمرير إلى'/'التركيز على' عنصر في الصفحة.

عادةً، سأستخدم وسم المرجع مع href="#something"، لكنني بالفعل أستخدم حدث hashchange مع مكون BBQ لتحميل هذه الصفحة.

هل هناك أي طريقة أخرى، عبر جافاسكريبت، لجعل الصفحة تنتقل إلى عنصر محدد على الصفحة؟

إليك المخطط الأساسي لما أحاول القيام به:

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

إذا كان العنصر غير مرئي حالياً على الصفحة، يمكنك استخدام الطريقة الأصلية scrollIntoView().

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

حيث أن true يعني المحاذاة إلى أعلى الصفحة، وfalse يعني المحاذاة إلى الأسفل.

وإلا، هناك إضافة scrollTo() لـ jQuery يمكنك استخدامها.

أو ربما فقط الحصول على top position()^(docs) للعنصر، وضبط scrollTop()^(docs) لتلك الموضع:

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

الإجابة رقم 2

ستبدو التقنية القياسية بالشكل الإضافي هكذا:

(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">. ترك التعامل مع الخيارات وقابلية التهيئة كتمرين للقارئ.

الإجابة رقم 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

للتنقل إلى عنصر محدد على صفحتك، يمكنك إضافة دالة داخل jQuery(document).ready(function($){...}) كما يلي:

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

يعمل بشكل رائع في جميع المتصفحات. اضبط السرعة وفقًا لاحتياجاتك.