쓰는 방법
【1 point 앵커 포인트
앵커 링크를 사용하는 것은 상단으로 간단한 반환입니다. 이 구현은 주로 페이지 상단에 지정된 이름을 가진 앵커 링크를 배치 한 다음 페이지 아래의 앵커로 돌아갈 수있는 링크를 배치합니다. 사용자는 링크를 클릭하여 앵커가있는 상단 위치로 돌아갑니다.
[참고] 앵커 포인트에 대한 자세한 정보는 여기에서 이동합니다.
<body style = "height : 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor"style = "위치 : 고정; 오른쪽 : 0; 하단 : 0"> 위로 뒤로 </a> </body>
【2 oll 스크롤 탑
스크롤 탑 속성은 컨텐츠 영역 위에 숨겨진 픽셀의 수를 나타냅니다. 요소가 스크롤되지 않으면 스크롤 탑의 값은 0입니다. 요소가 수직으로 스크롤되면 스크롤 탑의 값이 0보다 크고 요소 위의 보이지 않는 콘텐츠의 픽셀 폭을 나타냅니다.
ScrollTop이 쓸 수 있으므로 ScrollTop을 사용하여 기능을 상단으로 다시 달성 할 수 있습니다.
[참고] 페이지의 ScrollTop의 호환성 문제에 대한 세부 사항은 여기에서 이동합니다.
<body style = "height : 2000px;"> <button id = "test"style = "style ="position : right; 오른쪽 : 0; 하단 : 0 "> 상단으로 돌아 가기 </button> <click> <click = function () {document.body.scrolltop = document.documentElement.scrolltop = 0;} </script> </body>【3 oll scrollto ()
scrollto (x, y) 메소드는 현재 창에 표시된 문서를 스크롤하여 문서의 좌표 x와 y로 지정된 지점이 디스플레이 영역의 왼쪽 상단에 있습니다.
상단으로 돌아 오는 효과를 달성하려면 Scrollto (0,0)를 설정하십시오.
<body style = "높이 : 2000px;"> <버튼 id = "test"style = "position : right; 오른쪽 : 0; 하단 : 0"> 상단으로 돌아가서 </button> <click = function () {scrollto (0,0);} </script> </body>【4 oll Scrollby ()
Scrollby (x, y) 메소드 스크롤 스크롤 현재 창에 표시된 문서, x 및 y 스크롤의 상대적인 양을 지정합니다.
현재 페이지의 스크롤 길이를 매개 변수로 사용하고 반대로 스크롤하면 상단으로 돌아가는 효과를 얻을 수 있습니다.
<body style = "height : 2000px;"> <버튼 id = "테스트"스타일 = "position : right; 오른쪽 : 0; 하단 : 0"> 상단으로 돌아가서 </button> <click = function () {var top = document.body.scrolltoptop || document.documentElement.scrolltopscrollby (0, -top);} </script> </body>【5 oll Scrollintoview ()
요소 .scrollintoview 메서드는 현재 요소를 스크롤하고 브라우저의 가시 영역으로 들어갑니다.
이 방법은 부울 값을 매개 변수로 받아 들일 수 있습니다. 사실이라면, 요소의 상단이 현재 영역의 가시 부분 상단과 정렬되어 있음을 의미합니다 (현재 영역이 스크롤 가능한 경우). false 인 경우 요소의 바닥이 현재 영역의 가시 부분의 꼬리와 정렬되어 있음을 의미합니다 (현재 영역이 스크롤 가능). 이 매개 변수가 제공되지 않으면 기본값이 참입니다.
이 방법을 사용하는 원리는 앵커 포인트를 사용하는 원리와 유사합니다. 페이지 상단에 대상 요소를 설정하십시오. 페이지가 스크롤되면 대상 요소가 페이지 영역 밖에서 스크롤됩니다. 뒤로 상단 버튼을 클릭하여 원래 위치로 돌아가 예상 효과를 달성하십시오.
<body style = "height : 2000px;"> <div id = "target"> </div> <button id = "test"style = "style ="position : right; 오른쪽 : 0; 하단 : 0 "> 다시 상단으로 돌아갑니다 </button> <cript> test.onclick = function () {target.scrollintoview ();} </script> </body>향상되었습니다
다음은 기능을 상단으로 다시 향상시킵니다
【1 enh 표시 향상
CSS를 사용하여 "다시 상단"을 그리워서 시각적 그래픽으로 끌어 올리십시오 (IE8-Browser와 호환되는 경우 대신 사진을 사용하십시오).
CSS 의사 요소 및 의사 호버 효과를 사용하십시오. 마우스가 요소로 이동하면 텍스트가 상단으로 다시 표시되며 이동할 때 표시되지 않습니다.
<tyle> .box {위치 : 고정; 오른쪽 : 오른쪽 : 10px; 하단 : 10px; 높이 : 30px; 너비 : 50px; 텍스트-정렬 : 중심; 패딩 탑 : 20px; 배경색 : Lightblue; Border-Radius : 20%; 오버플로 : 숨겨진;}.}. 상자 : 호버 : 전 {top : 50%}. Box : Hover .box-in {가시성 : 숨겨진;}. Box : the {position : 절대; 왼쪽 : 50%: 변환 :-50%); 상단 : 뒤로 : '뒷면으로 : 컨텐츠 :'back to the top '; 40px; color : peru; font-weight : bold;} .box-in {가시성 : 가시적; 표시 : 디스플레이 : 인라인-블록; 높이 : 높이 : 20px; 너비 : 20px; 경계 : 3px 단단한 검은 색; 경계 색상 : 흰색 투명 투명 흰색; 변환 : 회전 (45deg) </style> <높이 : 2000px; "> <divy;"> id = "box"> <div> </div> </div> </body>【2 ation 애니메이션 향상
상단에 애니메이션을 추가하려면 스크롤 바가 특정 속도로 상단으로 롤백됩니다.
두 가지 유형의 애니메이션이 있습니다. 하나는 CSS 애니메이션이며 스타일 변경과 전환이 필요합니다. 다른 하나는 타이머를 사용하여 구현하는 JavaScript 애니메이션입니다.
위의 5 가지 구현에서 ScrollTop, Scrollto () 및 Scrollby () 메소드는 애니메이션을 추가 할 수 있으며 스타일 변경이 없으므로 JavaScript 애니메이션 만 추가 할 수 있습니다.
타이머는 SetInterval, settimeout 및 requestAnimationFrame을 사용할 수 있습니다. 다음은 가장 성능이 좋은 타이머 requestAnimationFrame을 사용하여이를 구현하는 것입니다.
[참고] IE9-Browser는이 방법을 지원하지 않으며 호환성을 위해 Settimeout을 사용할 수 있습니다.
1. 스크롤 탑 애니메이션 효과를 추가하십시오
타이머를 사용하여 스크롤 탑 값을 0으로 줄일 때까지 매번 50 씩 줄이고 애니메이션이 완료됩니다.
<cript> var timer = null; box.onclick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || documentelement.scrolltop; if (Otop> 0) {document.scrolltop - etcrolltop- etcolltop- 50; TIMER = requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>2. Scrollto () 애니메이션 효과를 추가하십시오
Scrolltop 값을 통해 scrollto (x, y)에서 Y 매개 변수를 가져오고 0으로 줄어들 때까지 매번 50 씩 줄이면 애니메이션이 완료됩니다.
<cript> var timer = null; null; box.onclick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (Otop> 0) {Scrollto (0, otop-50); requestAnimationFrame (fn);} else {cancelAnimationFrame (타이머);}});} </script>3. Scrollby () 애니메이션 효과를 추가하십시오
Scrollby (x, y)에서 y 매개 변수를 ScrollTop이 0이 될 때까지 -50으로 설정하면 롤백이 중지됩니다.
<cript> var timer = null; box.onclick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (Otop> 0) {scrollby (0, 50); requestAnimationFrame (fn);} else {cancelAnimationFrame (타이머);}});} </script>성취하다
ScrollTop, Scrollby () 및 Scrollto () 메소드는 모두 ScrollTop 값이 애니메이션 중지에 대한 참조로 0으로 감소되는지 여부를 사용하며 세 가지 애니메이션의 원칙과 구현은 기본적으로 유사하며 성능도 비슷합니다. 마지막으로, 애니메이션 향상 효과는 가장 일반적으로 사용되는 스크롤 탑 속성으로 달성됩니다.
물론 50의 속도가 적합하지 않다고 생각되면 실제 상황에 따라 조정할 수 있습니다.
<tyle> .box {위치 : 고정; 오른쪽 : 오른쪽 : 10px; 하단 : 10px; 높이 : 30px; 너비 : 50px; 텍스트-정렬 : 중심; 패딩 탑 : 20px; 배경색 : Lightblue; Border-Radius : 20%; 오버플로 : 숨겨진;}.}. 상자 : 호버 : 전 {top : 50%}. Box : Hover .box-in {가시성 : 숨겨진;}. Box : the {position : 절대; 왼쪽 : 50%: 변환 :-50%); 상단 : 뒤로 : '뒷면으로 : 컨텐츠 :'back to the top '; 40px; color : peru; font-weight : bold;} .box-in {가시성 : 가시적; 표시 : 디스플레이 : 인라인-블록; 높이 : 높이 : 20px; 너비 : 20px; 경계 : 3px 단단한 검은 색; 경계 색상 : 흰색 투명 투명 흰색; 변환 : 회전 (45deg) </style> <높이 : 2000px; "> <divy;"> id = "box"> <div> </div> </div> </body> <cript> var timer = null; null; box.onclick = function () {cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {var otop = document.body.scrolltop || document.documentelement.scrolltop; 0) {document.body.scrolltop = document.documentElement.scrolltop = otop -50; timer = requestAnimationFrame (fn);} else {cancelAnimationFrame (timer);}});} </script>위의 내용은 JS 구현을 기반으로 한 5 가지 작문 방법 (구현에서 향상)에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 답장을 드릴 것입니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!