> 웹 프론트엔드 > JS 튜토리얼 > TOP 클릭 후 바로 페이지 상단으로 이동하지 않고 위로 스크롤됩니다_javascript 스킬

TOP 클릭 후 바로 페이지 상단으로 이동하지 않고 위로 스크롤됩니다_javascript 스킬

WBOY
풀어 주다: 2016-05-16 19:18:52
원래의
1117명이 탐색했습니다.

웹페이지가 너무 길면 TOP
top로 빠르게 돌아가기 위해 일반적으로 앵커 태그를 사용합니다. , 하지만 고수들도 있습니다. 간단하게 만들어 보세요:

해외 데모 주소: http://tonyyoo.com/v2/

TOP을 클릭해도 바로 상위로 이동하지 않습니다. 페이지가 위로 스크롤됩니다. . 페이지 상단에서 길이가 길어질수록 스크롤 속도가 빨라집니다. . .

조사 결과 4개의 JS가 사용되었습니다.




그게 전부인 것 같습니다 너무 복잡해요. . 동일한 효과를 얻을 수 있는 더 간단한 코드가 있는지 모르겠습니다. .
페이지가 로드된 후 모든 하이퍼링크를 탐색하고 href에 #header가 있는지 확인합니다. 그렇다면 scrollTo를 트리거하세요. . .



[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]<script> function s2top(){ var a = document.getElementsByTagName('a'); var l = a.length; for (var i = 0 ; i < l ; i ++){ var ai = a[i]; if (/#header$/.test(ai.href)){ ai.onclick = function(){ var o = this; var ot = o.offsetTop; for (var t = 0 ; t < 20 ; t ++){ setTimeout("scrollBy(0,-" + parseInt(ot / 20) + ")",t * 50 + 1); } return false; } } } } </script>
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿