الحصول على موضع التمرير الحالي وتمريره كمتغير مع رابط؟

StackOverflow https://stackoverflow.com/questions/1022652

  •  06-07-2019
  •  | 
  •  

سؤال

سأكون صادقًا، أنا بعيد جدًا عن أعماقي هنا.لقد قمت بإنشاء نظام ترقيم الصفحات حيث تقوم بالنقر فوق الارتباط الذي يعيد تحميل الصفحة ويتم عرض عدد معين من عناصر القائمة في قائمة غير مرتبة.عند النقر عليه مرة أخرى، سيتم إعادة تحميل الصفحة ويظهر المزيد من العناصر.فكر في كيفية قيام تويتر بعرض التغريدات في خلاصتك.

المشكلة هي أنه عند إعادة تحميل الصفحة تبقى في الأعلى.ما أريده هو أن ينتقل إلى نفس الموضع في الصفحة التي كان بها سابقًا.

لدي بالفعل محدد للارتباط الذي تم إعداده بشكل جيد، ولا أعرف كيفية الحصول على موضع التمرير الحالي ثم تمريره إلى الصفحة الجديدة للانتقال إليه.

هذا هو الكود الخاص بي حتى الآن:

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

أين أذهب من هنا؟

هل كانت مفيدة؟

المحلول

  1. قم بإعادة تحميل العناصر باستخدام AJAX بدلاً من إعادة تحميل الصفحة بأكملها.

  2. احصل على موضع التمرير وقم بتعيينه باستخدام window.pageYOffset و window.scrollTo(0, y).

    سأقوم بتخزين الموضع في تجزئة عنوان URL:

    // after loading the document, scroll to the right position
    // maybe location.hash has to be converted to a number first
    $(document).ready(function() {
        window.scrollTo(0, location.hash);
    });
    
    // I'm not quite sure if reload() does preserve the hash tag.
    location.hash = window.pageYOffset;
    location.reload();
    

نصائح أخرى

وكما قال ع إضافة عناصر عبر مكالمة اياكس بدلا من لإعادة تحميل الصفحة.

إذا كنت لا تريد استخدام jQuery.ScrollTo توصيل في. التي تدعم كل ما يتعلق التمرير كنت قد حلمت حول

وأعتقد أن ما عليك القيام به هو فقط لتمرير مرساة HTML في نهاية الرابط. سيقوم المتصفح تلقائيا انتقل إلى العنصر بجوار مرساة مطابقة. مثال:

<a href="page2.html#myanchor">Next page</a>

وعند نقطة ما في منتصف page2:

<a name="myanchor">My item N</a>

وفقا لارتباطShawn Grigson، وpageYOffset غير معتمد على نفسه في جميع المتصفحات.

وحل مسج (نأمل حقا عبر متصفح متوافق، على الرغم من أنني لم تختبر حتى الآن) من أجل الحصول على ووضع التمرير العمودي عنصر هو <وأ href = "http://api.jquery.com/scrollTop/" يختلط = "نوفولو"> scrollTop () .

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top