네이티브 JS는 최상위로의 원활한 복귀를 구현합니다.

맨 위로 돌아가기 구성 요소는 간단한 요구 사항이 있는 매우 일반적인 웹 페이지 기능입니다. 페이지가 특정 거리만큼 스크롤된 후 맨 위로 가기 버튼이 표시됩니다. 이 버튼을 클릭하면 스크롤 막대를 처음으로 다시 스크롤할 수 있습니다. 페이지.

구현 아이디어도 매우 쉽습니다. document.documentElement.scrollTop 또는 document.body.scrollTop의 값을 변경하면 됩니다.

이 글은 가속과 감속의 멋진 효과를 모두 버리고, 소프트웨어의 본질로 돌아가 가장 단순한 구현만을 제공하며 소위 사용자 경험을 추구하지 않습니다.

아이디어와 코드가 매우 간단하기 때문에 구현 내용은 직접 포스팅하겠습니다.

var BackTop = function (domE,distance) {
if (!domE) return;
var _onscroll = window.onscroll,
_onclick = domE.onclick;
window.onscroll = throttle(function(){
typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
toggleDomE();
},100);
domE.onclick = function(){
typeof _onclick === 'function' && _onclick.apply(this, arguments);
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
};
function toggleDomE(){
domE.style.display = (document.documentElement.scrollTop || document.body.scrollTop) > (distance || 500) ? 'block' : 'none';
}
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
}; 

전화 방법:

<script>
new BackTop(document.getElementById('backTop'))
</script> 

제가 이 블로그를 쓰고 이렇게 간단한 것을 만든 이유는 두 가지입니다.

1) 저는 이 기간 동안 몇 가지 일반적인 간단한 구성 요소를 직접 작성해 왔습니다. 이 블로그 시리즈를 더욱 완벽하게 만들기 위해 이 구성 요소를 추가했습니다.

2) 작업 과정에서 내 견해 중 하나를 표현하고 싶습니다. 사용자 경험을 사용하여 소프트웨어나 제품을 꾸미지 마십시오. 솔직하게 말하면 사용자 경험은 두 단어로 나눌 수 있습니다. 하나는 좋은 인상입니다. 또 하나는 좋은 인상일 뿐이지, 아무리 아름답게 만들어도 제품의 핵심가치와 서비스가 충분하지 않다면, 그것이 제품 개발과 운영의 궁극적인 목표는 아닙니다. 슈퍼 무적 로켓으로 정상으로 돌아가는 기능은 헛된 것입니다. 프론트 엔드 개발을 할 때 제품 관리자가 사용자 경험 기능을 맹목적으로 언급하는 정도를 어느 정도 통제해야 합니다. 이 구성 요소의 경우 가속 또는 감속 효과를 수행하는 것이 중복된다고 생각합니다. 하지만 사용자의 시간을 지연시키고 자신을 포기하게 만드는 기술을 고집하면 작업이 더욱 완벽해질 수 있습니다.

몇 가지 일반적인 웹페이지를 공유하겠습니다. 상위 코드로 돌아가기

1. HTML 앵커 태그를 사용하는 것이 가장 쉽습니다

하지만 유일한 단점은 스타일이 별로 좋지 않아 이런 앵커 태그가 표시된다는 점입니다.

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

태그 뒤, 상단에 가까우면 어디에나 배치할 수 있습니다.

페이지 하단에 위치:

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

맨 위로 돌아가기

2. 자바스크립트 스크롤 기능을 이용해 상위로 돌아갑니다

스크롤 기능은 스크롤 막대의 위치를 ​​제어하는 ​​데 사용됩니다. 두 가지 매우 간단한 구현 방법이 있습니다.

방법 1(권장: 간단하고 편리함):

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

맨 위로 돌아가기

scroll의 첫 번째 매개변수는 가로 위치이고, 두 번째 매개변수는 세로 위치입니다. 예를 들어 세로로 50픽셀에 배치하려면 스크롤(0,50)으로 변경하면 됩니다.

방법 2(효과에 집중: 천천히 위로):

이 방법은 맨 위로 점진적으로 돌아가는 방식이므로 코드는 다음과 같습니다.

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}<ahref="pageScroll();">返回顶部</a>

이렇게 하면 동적으로 상위로 복귀하게 되는데, 상위로 복귀하더라도 코드는 여전히 실행 중이므로 이를 중지하려면 pageScroll 함수에 문장을 추가해야 합니다.

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);

3. Onload와 스크롤 기능을 사용하여 동적으로 상위로 돌아갑니다

첫 번째 추가:

웹 페이지의 본문 태그 끝 부분 앞에

<divid="gotop">返回顶部</div>

2. 그런 다음 다음 JS 스크립트 부분을 호출합니다.

BackTop=function(btnId){varbtn=document.getElementById(btnId);vard=document.documentElement;window.onscroll=set;btn.onclick=function(){btn.style.display="none";window.onscroll=null;this.timer=setInterval(function(){d.scrollTop-=Math.ceil(d.scrollTop*0.1);if(d.scrollTop==0)clearInterval(btn.timer,window.onscroll=set);},10);};functionset(){btn.style.display=d.scrollTop?'block':"none"}};BackTop('gotop');

웹페이지에 배치하거나 gotop.js와 같은 js 파일로 독립적으로 저장할 수 있으며 다음 형식으로 저장할 수 있습니다.

<scriptsrc="/js/gotop.js"type=text/javascript></script>

물론 "Return to Top" 라벨 아래에 배치하는 것이 가장 좋습니다. 이 호출 방법은 파일 경로가 JS라고 가정하여 다른 위치에 배치할 때 실제 상황에 맞게 수정하시기 바랍니다.