كيف تكتب
【1】 نقطة مرساة
باستخدام ارتباطات المرساة هو عودة بسيطة إلى الأعلى. يضع هذا التنفيذ بشكل أساسي رابطًا مرساة مع اسم محدد في الجزء العلوي من الصفحة ، ثم يضع رابطًا للعودة إلى المرساة أسفل الصفحة. ينقر المستخدم على الرابط للعودة إلى الموضع الأعلى حيث يوجد المرساة.
[ملاحظة] سيتم نقل معلومات مفصلة حول نقاط الربط هنا
<body style = "الارتفاع: 2000px ؛"> <div id = "topanchor"> </div> <a href = "#topanchor" style = "الموضع: ثابت ؛ يمين: 0 ؛ أسفل: 0"> العودة إلى الأعلى </a> </body>
【2】 scrolltop
تشير خاصية ScrollTop إلى عدد وحدات البكسل المخبأة فوق منطقة المحتوى. عندما لا يتم تمرير العنصر ، تكون قيمة scrolltop 0. إذا تم تمرير العنصر رأسياً ، تكون قيمة scrolltop أكبر من 0 ، وتشير إلى عرض البكسل للمحتوى غير المرئي فوق العنصر.
نظرًا لأن Scrolltop قابل للكتابة ، يمكن استخدام Scrolltop لتحقيق الوظيفة مرة أخرى إلى الأعلى
[ملاحظة] يتم نقل تفاصيل قضايا التوافق في scrolltop على الصفحة هنا
<body style = "height: 2000px ؛
【3】 scrollto ()
تمرير طريقة Scrollto (x ، y) المستند المعروض في النافذة الحالية ، بحيث توجد النقاط المحددة بواسطة الإحداثيات x و y في المستند في الزاوية اليسرى العلوية من منطقة العرض.
قم بتعيين Scrollto (0،0) لتحقيق تأثير العودة إلى الأعلى
<body style = "الارتفاع: 2000px ؛"> <button id = "test" style = "الموضع: ثابت ؛ يمين: 0 ؛ أسفل: 0"> العودة إلى الأعلى </button> <script> test.onclick = function () {scrollto (0،0) ؛} </script> </body>【4】 scrollby ()
Scrollby (x ، y) طريقة تمرير المستند المعروض في النافذة الحالية ، x و y حدد الكمية النسبية للتمرير
ما عليك سوى استخدام طول التمرير للصفحة الحالية كمعلمة والتمرير في الاتجاه المعاكس ، يمكنك تحقيق تأثير العودة إلى الأعلى.
<body style = "الارتفاع: 2000px ؛"> <button id = "test" style = "الموضع: ثابت ؛ يمين: 0 ؛ أسفل: 0"> العودة إلى الأعلى </button> <script> test.onclick = function () {var top = document.body.scrolltoptop || document.documentElement.scrolltopscrollby (0 ، -Top) ؛} </script> </body>【5】 scrollintoview ()
element.scrollintoview طريقة تمرير العنصر الحالي ويدخل المنطقة المرئية للمتصفح.
يمكن أن تقبل هذه الطريقة قيمة منطقية كمعلمة. إذا كان هذا صحيحًا ، فهذا يعني أن الجزء العلوي من العنصر يتماشى مع الجزء العلوي من الجزء المرئي من المنطقة الحالية (شريطة أن تكون المنطقة الحالية قابلة للتمرير) ؛ إذا كان هذا خطأ ، فهذا يعني أن الجزء السفلي من العنصر يتماشى مع ذيل الجزء المرئي من المنطقة الحالية (شريطة أن تكون المنطقة الحالية قابلة للتمرير). إذا لم يتم توفير هذه المعلمة ، يكون الافتراضي صحيحًا
مبدأ استخدام هذه الطريقة يشبه مبدأ استخدام نقاط الربط. اضبط العنصر الهدف في الجزء العلوي من الصفحة. عند تمرير الصفحة ، يتم تمرير العنصر الهدف خارج منطقة الصفحة. انقر فوق الزر "العودة إلى أعلى" للعودة إلى الموضع الأصلي ، وحقق التأثير المتوقع.
<body style = "الارتفاع: 2000px ؛"> <div id = "target"> </div> <button id = "test" style = "الموضع: يمين: 0 ؛ أسفل: 0"> العودة إلى الأعلى </button> <script> test.onclick = function () {target.scrollintoview () ؛} </script> </body>تعزيز
ما يلي يعزز الوظيفة مرة أخرى إلى الأعلى
【1】 عرض التعزيز
استخدم CSS لرسم وتحويل "العودة إلى الأعلى" إلى رسم مرئي (إذا كان متوافقًا مع IE8-Browser ، استخدم الصور بدلاً من ذلك)
استخدم آثار العناصر الزائفة والكاذبة المزيفة. عندما ينتقل الماوس إلى العنصر ، يتم عرض النص إلى الأعلى ، ولا يظهر عند نقله.
<Style> .box {position: fixed ؛ اليمين: 10px ؛ القاع: 10px ؛ الارتفاع: 30px ؛ العرض: 50px ؛ النصوص النصية: المركز ؛ الحادين: 20px ؛ خلفية اللون: LightBlue ؛ الحدود الحدودية: 20 ٪ ؛ تجاوز: مخفي ؛ 40px ؛ اللون: peru ؛ font-weight: bold ؛} .box-in {الرؤية: مرئية ؛ العرض: inline block ؛ الارتفاع: 20px ؛ العرض: 20px ؛ الحدود: 3px سوداء صلبة ؛ بلون الحدود: أبيض شفاف أبيض ؛ id = "box"> <viv> </viv> </viv> </body>【2】 تعزيز الرسوم المتحركة
لإضافة الرسوم المتحركة إلى الأعلى ، يعود شريط التمرير إلى الأعلى بسرعة معينة
هناك نوعان من الرسوم المتحركة: واحد هو الرسوم المتحركة CSS ، والتي تتطلب تغييرات في النمط والانتقال ؛ والآخر هو JavaScript Animation ، والذي يستخدم مؤقتًا لتنفيذه.
في التطبيقات الخمسة المذكورة أعلاه ، يمكن أن تضيف أساليب Scrolltop و Scrollto () و Scrollby (
يمكن استخدام المؤقت ، setInterval ، setTimeout و requestAnimationFrame. ما يلي هو استخدام أفضل الأداء الموقت requestAnimationFrame لتنفيذه.
[ملاحظة] لا يدعم IE9-Browser هذه الطريقة ، يمكنك استخدام SetTimeOut للتوافق
1. إضافة تأثير الرسوم المتحركة Scrolltop
باستخدام مؤقت ، قلل قيمة scrolltop بمقدار 50 في كل مرة حتى يتم تقليلها إلى 0 ، ويتم الانتهاء من الرسوم المتحركة
<script> var timer = null ؛ box.onclick = function () {cancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop ؛ 50 ؛ Timer = requestAnimationFrame (fn) ؛} آخر {cancelAnimationFrame (Timer) ؛}}) ؛} </script>2. إضافة Scrollto () تأثير الرسوم المتحركة
احصل على المعلمة y في Scrollto (x ، y) من خلال قيمة scrolltop ، قللها بمقدار 50 في كل مرة حتى يتم تقليلها إلى 0 ، ويتم الانتهاء من الرسوم المتحركة
<script> var timer = null ؛ box.onclick = function () {cancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop ؛ requestAnimationFrame (fn) ؛} آخر {cancelAnimationFrame (timer) ؛}}) ؛} </script>3. إضافة تأثير الرسوم المتحركة Scrollby ()
اضبط المعلمة y في Scrollby (x ، y) إلى -50 حتى يكون Scrolltop 0 ، ثم يتوقف التراجع
<script> var timer = null ؛ box.onclick = function () {cancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (function fn () {var otop = document.body.scroltop || document.documentElement.scrolltop ؛ if (otop> 0) {scrollby (0 ، -50) ؛ requestAnimationFrame (fn) ؛} آخر {cancelAnimationFrame (timer) ؛}}) ؛} </script>ينجز
نظرًا لأن أساليب Scrolltop و Scrollby () و Scrollto () كلها تستخدم ما إذا كانت قيمة Scrolltop قد تم تخفيضها إلى 0 كمرجع لوقف الرسوم المتحركة ، وتكون مبادئ وتطبيقات الرسوم المتحركة الثلاثة متشابهة بشكل أساسي ، والأداء متشابه أيضًا. أخيرًا ، يتم تحقيق تأثير تعزيز الرسوم المتحركة مع سمة Scrolltop الأكثر شيوعًا
بالطبع ، إذا كنت تعتقد أن سرعة 50 ليست مناسبة ، فيمكنك ضبطها وفقًا للوضع الفعلي
<Style> .box {position: fixed ؛ اليمين: 10px ؛ القاع: 10px ؛ الارتفاع: 30px ؛ العرض: 50px ؛ النصوص النصية: المركز ؛ الحادين: 20px ؛ خلفية اللون: LightBlue ؛ الحدود الحدودية: 20 ٪ ؛ تجاوز: مخفي ؛ 40px ؛ اللون: peru ؛ font-weight: bold ؛} .box-in {الرؤية: مرئية ؛ العرض: inline block ؛ الارتفاع: 20px ؛ العرض: 20px ؛ الحدود: 3px سوداء صلبة ؛ بلون الحدود: أبيض شفاف أبيض ؛ id = "box"> <viv> </viv> </viv> </body> <script> var timer = null ؛ box.onclick = function () {cancelAnimationFrame (timer) ؛ timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documenteleteletement.f ؛ 0.ما سبق هو الوصف الكامل لطرق الكتابة الخمسة (من التنفيذ إلى التحسين) بناءً على تنفيذ JS لك ، والتي قدمتها إليك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر لك في الوقت المناسب. شكرًا جزيلاً على دعمكم لموقع Wulin Network!