집 >웹 프론트엔드 >JS 튜토리얼 >javascript 맨 위로 돌아가기 효과(자체 작성 코드)_javascript 기술

javascript 맨 위로 돌아가기 효과(자체 작성 코드)_javascript 기술

WBOY원래의: 2016-05-16 17:44:251198검색

요즘에는 많은 웹사이트에서 상위로 돌아가는 효과를 사용하고 있습니다. 물론 게으른 경우 #에 링크를 직접 연결하는 것도 효과를 얻을 수 있습니다. 오늘은 네이티브 자바스크립트를 사용하여 작성하는 시간을 가졌습니다. 부족한 실력으로 인해 질문이 있으시면 지적해 주시기 바랍니다.
html 코드:

코드 복사 코드는 다음과 같습니다.

🎜>js-맨 위로

"메모장"은 기본입니다. 간단한 문서 작성을 위한 텍스트 편집기. 메모장은 텍스트(.txt) 파일을 보거나 편집하는 데 가장 일반적으로 사용되지만 많은 사용자는 메모장이 웹 페이지를 만드는 간단한 도구라고 생각합니다.

메모장은 매우 기본적인 형식만 지원하기 때문에 일반 텍스트로 유지해야 하는 문서에 특수 서식을 저장할 수 없는 경우가 있습니다. 특수 문자나 기타 서식은 게시된 웹 페이지에 표시할 수 없거나 오류가 발생할 수 있으므로 웹 페이지용 HTML 문서를 만들 때 특히 유용합니다.

메모장 파일은 유니코드, ANSI, UTF-8 또는 빅엔디안 유니코드 형식으로 저장할 수 있습니다. 이러한 형식은 다양한 문자 집합으로 문서 작업을 할 때 더 큰 유연성을 제공합니다.

메모장은 간단한 문서를 작성하기 위한 기본 텍스트 편집기입니다. 메모장은 텍스트(.txt) 파일을 보거나 편집하는 데 가장 일반적으로 사용되지만 많은 사용자는 메모장이 웹 페이지를 만드는 간단한 도구라고 생각합니다.

메모장 파일은 유니코드, ANSI, UTF-8 또는 빅엔디안 유니코드 형식으로 저장할 수 있습니다. 이러한 형식은 다양한 문자 집합의 문서 작업 시 더 큰 유연성을 제공합니다.

맨 위로
>

toTop.js 코드
:

코드 복사

코드는 다음과 같습니다. //첫 번째 매개변수는 버튼 ID입니다. 매개변수는 부울 값이며, true는 버튼이 항상 표시된다는 의미이고, false는 스크롤 거리가 0이 아닐 때 버튼이 표시된다는 의미입니다. function toTop(id,show){

var oTop = document.getElementById(id) ;

 var bShow = show; 
oTop.style.display = 'none'; 
setTimeout(btnShow,50); onclick = scrollToTop; 
function scrollToTop(){ 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop 
var iSpeed ​​​​= Math.floor(-scrollTop/2); 🎜>if(scrollTop < ;= 0){ 
if(!bShow){ 
oTop.style.display = 'none' 
} 
return 
} 
document; .documentElement.scrollTop = document .body.scrollTop = scrollTop iSpeed; 
setTimeout(arguments.callee,50); 
} 
function btnShow(){ 
var scrollTop = document.documentElement.scrollTop | | document.body.scrollTop ; 
if(scrollTop <= 0 ){ 
oTop.style.display = 'none' 
}else{ 
oTop.style.display =' ; 
} 
setTimeout(arguments.callee,50); 
} 
} 

 

참고
: 
position:fixed는 유효하지 않습니다. IE6에서는 
다양한 브라우저 버그
를 클릭해 호환성 세부정보를 확인하세요. 게다가 이전에 IE6 
의 position:fixed failure 문제를 해결하기 위해 

css라는 글을 썼는데, 이 효과는 지원되지 않습니다.
PS: 심심할 때 자바스크립트에 대한 지식을 바탕으로 무심코 작성한 효과들입니다.
두 번째 방법 : 많은 웹페이지는 하단에 "맨 위로 돌아가기" 버튼을 배치합니다. 특히 페이지 하단에 탐색 기능이 없는 웹페이지는 방문자에게 도움이 될 수 있습니다. 내비게이션을 다시 찾거나 광고를 다시 읽어보세요(생각만 해도 너무 아름답습니다). 최근 몇 년 동안 JavaScript가 점점 더 널리 사용됨에 따라 슬라이딩 효과가 어디에나 있으므로 이에 따라 최상위로 돌아가는 기능을 슬라이딩 효과로 만들었습니다. 이후 물리적 특성에 더 잘 맞도록 감속 슬라이딩 효과를 갖도록 수정되었습니다.
먼저 원리에 대해 이야기해 보겠습니다. 스크롤 막대에서 페이지 상단까지의 거리를 구한 다음 일정 거리만큼 위로 이동한 다음 스크롤 막대에서 페이지 상단까지의 거리를 구합니다. 페이지를 특정 거리 위로 이동합니다(지난번보다 약간 작음). 코드부터 시작해 보겠습니다.

코드 복사

코드는 다음과 같습니다.

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY는 실제로 동일하지만 일부 브라우저에서만 작동합니다. 어떤 브라우저가 어떤 브라우저에서 작동하는지 직접 디버깅할 수 있습니다.
사용방법은?

코드 복사 코드는 다음과 같습니다.

TOP

성명：

이전 기사：jQuery 플러그인 개발의 기본에 대한 간략한 소개_jquery다음 기사：jQuery 플러그인 개발의 기본에 대한 간략한 소개_jquery

javascript 맨 위로 돌아가기 효과(자체 작성 코드)_javascript 기술

관련 기사