최근에 웹 사이트를 개발할 때 맨 위로 돌아갈 수있는 버튼을 만들어야하지만 주로 백엔드를 위해이를 개발하고 프론트 엔드에 능숙하지 않습니다. 온라인 정보 쿼리 후에는 맨 위로 돌아갈 버튼을 만들었습니다. 다음은 그것을 기록하는 두 가지 간단한 방법입니다. 이 웹 사이트를 좋아하는 친구들은이 웹 사이트를 북마크하고 때때로 학습 자료를 업데이트 할 수 있습니다.
첫 번째 유형 : 외부 jQuery 인용새 HTML 페이지를 만들고 다음 코드를 복사하고 저장 한 후 브라우저를 통해 열면 효과를 볼 수 있습니다.
<! docType html> <html lang = en> <head> <메타 charset = utf-8> <title> doc </title> <style> .Arrow {border : 9px solid transparent; 국경-바닥 색상 : #3da0db; 너비 : 0px; 높이 : 0px; 상단 : 0px} .Stick {너비 : 8px; 높이 : 14px; Border-Radius : 1px; 배경색 : #3DA0DB; 상단 : 15px; } #back_top div {위치 : 절대; 마진 : 자동; 오른쪽 : 0px; 왼쪽 : 0px; } #back_top {Background-Color : #dddddd; 높이 : 38px; 너비 : 38px; Border-Radius : 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.11.1-rc2/jquery.min.js> for (var i = 0; i <100; i ++) {$ (#article) .append (<p> xxxxxxxxxx <br> </p>)}) </script> <script> $ (function () {$ (window) .scroll (function () {// Window Scroll이 길고 다음 코드가 트리거됩니다. documentElement.scrolltop + document.body.scrolltop; (scrollt> 200) {// 스크롤 후 200px를 초과합니다. 정지 ()가 추가되기 전에 튀어 나와야한다. }); </script> </body> </html> 두 번째 유형 : CSS 및 특수 아이콘을 사용하여 설정전체 코드는 간단하고 아름답습니다. 상단 버튼으로 돌아갑니다. 위와 마찬가지로 코드를 HTML 파일에 복사하여 효과를 확인하십시오.
<! docType html> <html lang = en> <head> <메타 charset = utf-8> <title> doc </title> <style> #back_top {display : block; 너비 : 60px; 높이 : 60px; 위치 : 고정; 하단 : 50px; 오른쪽 : 40px; Border-Radius : 10px 10px 10px; 텍스트 결정 : 없음; 디스플레이 : 없음; 배경색 :#999999; } #back_top span {display : block; 너비 : 60px; 색상 : #ddddd; 글꼴 크기 : 40px; 텍스트 정렬 : 센터; 마진-탑 : 4px; } #back_top 스팬 : 호버 {색상 : #cccccc; }. }})) </script> <cript> $ (function () {$ (창) .scroll (function () {// Window 스크롤이있는 한 다음 코드가 트리거됩니다. var scrollt = document.documentElement.scrolltop + document.body.scrolltop; // scrollt> 200) {// scrolling the scrolling the scrolling the scrolling the scrolling get the scrolled $ (#back_top) .fadein (400); 200ms. $ (html, body) .animate ({scrolltop : 0px}, 200);};위의 두 가지 방법은 아이디어 만 제공하며 직접 사용할 수 있습니다. 원하는 아이콘을 직접 디버깅 할 수 있습니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.