في الآونة الأخيرة ، أحتاج إلى إنشاء زر للعودة إلى القمة عند تطوير موقع ويب ، لكنني أقوم بتطويره بشكل أساسي للواجهة الخلفية وأنا لست ماهرًا للغاية في الواجهة الأمامية. بعد استعلام المعلومات عبر الإنترنت ، قمت بإنشاء زر للعودة إلى الأعلى. فيما يلي طريقتان بسيطتان لتسجيله. يمكن للأصدقاء الذين يحبون هذا الموقع إشارة مرجعية عليه وسيقومون بتحديث مواد التعلم الخاصة بهم من وقت لآخر.
النوع الأول: نقلاً عن jQuery الخارجيقم بإنشاء صفحة HTML جديدة ، ونسخها وحفظ الكود التالي ، وافتحها من خلال المتصفح ، ويمكنك رؤية التأثير.
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> .arrow {border: 9px tramparent ؛ لون الحدود: #3DA0DB ؛ العرض: 0px ؛ الارتفاع: 0px ؛ أعلى: 0px} .stick {width: 8px ؛ الارتفاع: 14px ؛ الحدود الراديوس: 1 بكسل ؛ خلفية اللون: #3DA0DB ؛ أعلى: 15 بكسل ؛ } #back_top div {position: absolute ؛ الهامش: السيارات ؛ اليمين: 0px ؛ اليسار: 0px ؛ } #back_top {background-color: #ddddd ؛ الارتفاع: 38 بكسل ؛ العرض: 38 بكسل ؛ الحدود الحدودية: 3px ؛ العرض: كتلة ؛ المؤشر: مؤشر. الموقف: ثابت ؛ اليمين: 50 بكسل ؛ القاع: 100px ؛ العرض: لا شيء ؛ } </style> </head> <body> <div id = article> </viv> <div id = back_top> <div class = arrow> </viv> <div class = stick> </viv> <script src = http: //cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min لـ (var i = 0 ؛ i <100 ؛ i ++) {$ (#article) .append (<p> xxxxxxxxx <br> </p>)}}) </ document.documentElement.scrolltop + document.scrolltop ؛ تتلاشى. }) ؛ </script> </body> </html> النوع الثاني: استخدم CSS والرموز الخاصة لتعيينهالكود بأكمله بسيط وجميل. العودة إلى الزر العلوي. كما أعلاه ، انسخ الرمز في ملف HTML وفتحه لرؤية التأثير.
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> #back_top {display: block ؛ العرض: 60px ؛ الارتفاع: 60px ؛ الموقف: ثابت ؛ أسفل: 50 بكسل ؛ اليمين: 40 بكسل ؛ الحدود الحدودية: 10px 10px 10px ؛ تدمير النص: لا شيء ؛ العرض: لا شيء ؛ لون الخلفية:#999999 ؛ } #back_top span {display: block ؛ العرض: 60px ؛ اللون: #DDDDD ؛ حجم الخط: 40 بكسل ؛ محاذاة النص: المركز ؛ الهامش: 4 بكسل ؛ } #back_top span: hover {color: #cccccc ؛ } </style> </head> <body> <viv id = article> </viv> <a id = back_top href = ؛ ؛> <span> ⌆ </span> </a> </viv> <script> $ (functive () {for (var i = 0 ؛ }}) </script> <script> $ (function () {$ (window) .scroll (function () {// طالما تم تمرير النافذة ، سيتم تشغيل الكود التالي var scrollt = document.documentElement.scrolltop + document.scrolltop ؛ ثم $ (#back_top) .fadein (400) ؛ للتمرير إلى الأعلى في 200ms. $ (html ، الجسم)توفر الطريقتان أعلاه أفكارًا فقط ، ويمكن استخدامها مباشرة. يمكنك تصحيح الرموز التي تريدها بنفسك. آمل أن يكون ذلك مفيدًا لتعلم الجميع ، وآمل أن يدعم الجميع wulin.com أكثر.