js 간단한 클릭 맨 위로 돌아가기 효과 구현 method_javascript 기술
- WBOY원래의
- 2016-05-16 16:05:041474검색
이 기사의 예에서는 js의 간단한 클릭-복귀 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
페이지가 특히 길어서 사용자가 페이지 상단으로 돌아가기를 원하는 경우 상단으로 돌아가려면 여러 번 스크롤해야 합니다. 페이지 오른쪽 하단에 "맨 위로 돌아가기" 버튼이 있는 경우. 페이지에서 사용자는 이를 클릭하여 상단으로 돌아갈 수 있습니다.
구현 원칙: 페이지가 로드될 때 요소는 페이지의 오른쪽 하단에 위치하며, 사용자가 클릭하면 요소는 항상 오른쪽 하단에 위치합니다. 페이지가 맨 위로 돌아갑니다.
포인트 1: document.documentElement.clientWidth || document.body.clientWidth; 뒷면은 크롬, 앞면은 다른 브라우저와 호환됩니다.
포인트 2: oTop.style.left = screenw - oTop.offsetWidth "px"; 페이지가 로드되면 요소를 페이지의 가장 오른쪽에 배치하고 요소를 너비에서 뺍니다. 시각적 영역 자체의 너비입니다.
포인트 3: oTop.style.top = screenh - oTop.offsetHeight scrolltop "px"; 페이지가 스크롤될 때 요소의 Y 좌표 위치는 시각적 영역의 높이에서 요소 자체의 높이와 스크롤 거리.
포인트 4: document.documentElement.scrollTop = document.body.scrollTop =0; 요소 클릭 시 페이지의 스크롤 거리를 0으로 둡니다. 호환성을 위해 2개를 씁니다.
위 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
var screenw = document.documentElement.clientWidth || document.body.clientWidth;
var screenh = document.documentElement.clientHeight || document.body.clientHeight;
oTop.style.left = screenw - oTop.offsetWidth +"px";
oTop.style.top = screenh - oTop.offsetHeight + "px";
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
}
oTop.onclick = function(){
document.documentElement.scrollTop = document.body.scrollTop =0;
}
}
</script>
</head>
<body style="height:1000px;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.