Недавно мне нужно создать кнопку, чтобы вернуться к вершине при разработке веб -сайта, но я в основном разрабатываю ее для бэкэнда и не очень опытен на подходящей стороне. После онлайн -запроса на информацию я создал кнопку, чтобы вернуться к вершине. Ниже приведены два простых способа записать его. Друзья, которым нравится этот сайт, могут добавить его в закладки и время от времени обновлять свои учебные материалы.
Первый тип: цитирование внешнего jQueryСоздайте новую HTML -страницу, скопируйте и сохраните следующий код, откройте ее через браузер, и вы можете увидеть эффект.
<! Doctype html> <html lang = en> <Head> <meta charset = utf-8> <title> doc </title> <style> .Arrow {Border: 9px Solid Transparent; пограничный цвет цвета: #3DA0DB; Ширина: 0px; высота: 0px; Top: 0px} .stick {width: 8px; Высота: 14px; граница радий: 1PX; фоновый цвет: #3DA0DB; Верх: 15px; } #back_top div {position: Absolute; Порность: Авто; Справа: 0px; слева: 0px; } #back_top {founal-color: #ddddddd; Высота: 38px; Ширина: 38px; граница-радий: 3PX; дисплей: блок; курсор: указатель; позиция: исправлена; Справа: 50px; Внизу: 100px; дисплей: нет; } </style> </head> <body> <div id = article> </div> <div id = back_top> <div class = arrow> </div> <div class = Stick> </div> <script src = http: //cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js> </$ function> </$ </$ </$ </$ </$ <//$ </$ </$ </$ </$ </$ </$ </$ </$ </$ </$> for (var i = 0; i <100; i ++) {$ (#article) .append (<p> xxxxxxxxxxxmxxxmxxmxxmxxmxxxmxxxxmxxxmxxxmxxmxxxmxxxmxxxmxxxxmxxxxmxxxmxxxxmxxxxmxxxxxmxxxxxxxmxxxxx Document.documentelement.scrolltop + document.body.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; позиция: исправлена; Внизу: 50px; Справа: 40px; граница радий: 10px 10px 10px; Текстовое декорация: нет; дисплей: нет; фоновый цвет:#9999999; } #back_top span {display: block; Ширина: 60px; Цвет: #DDDDD; размер шрифта: 40px; Текст-альбом: Центр; маржинальная версия: 4px; } #back_top span: hover {color: #cccccc; } </style> </head> <body> <div id = article> </div> <a id = back_top href = script:;> <pan> ⌆ </span> </a> </div> <script> $ (function () {for (var i = 0; i <100; i ++) {$ (#article) .Append (<p> xxxx <bript (##article). }})</script><script>$(function(){ $(window).scroll(function(){ //As long as the window scrolls, the following code will be triggered var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Get the scrolling height if( scrollt >200 ){ //Judge the height after scrolling exceeds 200px, and затем $ (#Back_top) .fadein (400); Чтобы прокрутить верхнюю часть 200 мсВышеуказанные два метода предоставляют только идеи и могут использоваться напрямую. Вы можете отлаживать значки, которые вы хотите самостоятельно. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать wulin.com больше.