> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 Taobao의 맨 위로 돌아가기 효과를 모방합니다(코드 예).

JavaScript는 Taobao의 맨 위로 돌아가기 효과를 모방합니다(코드 예).

青灯夜游
풀어 주다: 2019-11-30 17:10:37
앞으로
2708명이 탐색했습니다.

이 기사에서는 JavaScript 모방 Taobao가 최고의 효과로 돌아갑니다(코드 예). 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

JavaScript는 Taobao의 맨 위로 돌아가기 효과를 모방합니다(코드 예).

요구사항: 스크롤바가 특정 위치에 도달하면 사이드바가 특정 위치에 고정되고, 특정 위치로 아래로 슬라이드되면 맨 위로 돌아가기 버튼이 표시됩니다. 버튼을 클릭하면 페이지가 동적으로 맨 위로 미끄러지며 빠른 속도에서 느린 속도로 위쪽으로 미끄러집니다.

아이디어:

1. js 코드는 페이지가 로드될 때까지 실행될 수 없습니다.

js 코드를 맨 아래에 작성하면 됩니다(위의 예시로 돌아가는 방법입니다)

맨 위에 쓰고 싶습니다. 다음 두 가지 유형을 사용할 수 있습니다.

  ①window.onload = function() {...}

  ②window.addEventListener('load', function() {...})

2. 사용해야 하는 요소를 가져옵니다

3. 스크롤 이벤트 스크롤을 바인딩합니다

사용자가 배너 모듈로 스크롤하면 사이드바가 고정됩니다.

if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离
    sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态
    sliderbar.style.top = sliderbarTop + 'px'; 
} else {
    sliderbar.style.position = 'absolute';
    sliderbar.style.top = '300px';
}
로그인 후 복사

사용자가 메인 모듈로 스크롤하면 디스플레이가 상단 버튼을 반환합니다

 if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮
     goBack.style.display = 'block';
 } else {
     goBack.style.display = 'none';
 }
로그인 후 복사

4. 클릭 이벤트를 바인딩합니다. click

페이지가 동적으로 상단으로 슬라이드됩니다. 빠른 것에서 느린 것으로 위쪽으로 슬라이딩

 sliderbar.addEventListener('click', function() {
     animate(window, 0);
 })
로그인 후 복사

5. 애니메이션 함수 animate(obj , target, callback)에 대해

여기서 obj 개체는 창입니다. 대상 대상 위치는 0입니다. 매개변수가 전달되지 않으면 무시해도 됩니다.

타이머 설정 setInterval();

단계 값을 단계 값으로 선언합니다. 값은 상단 위치에서 현재 스크롤 막대 위치까지의 차이를 10으로 나눈 값입니다. (스텝은 점점 작아지고 스크롤 속도는 점점 느려지므로 스크롤 막대의 속도가 빠른 것에서 천천히 슬라이드 업되는 것을 알 수 있습니다.)

var step = (target - window.pageYOffset) / 10;
로그인 후 복사

스텝이 항상 정수인 것은 아닙니다. 정수가 아닌 경우 스크롤 막대를 조금 앞으로 이동하게 할 수 있습니다. 스크롤 막대는 위아래로 움직일 수 있으므로 단계는 0보다 크거나 0보다 작을 수 있습니다. 0보다 크면 반올림하고, 0보다 작으면 반올림합니다.

step = step > 0 ? Math.ceil(step) : Math.floor(step);
로그인 후 복사

window.scroll(x, y) 문서의 특정 위치로 스크롤하면 타이머가 슬라이드됩니다. 함수를 호출할 때마다 조금씩 올라갑니다

window.scroll(0, window.pageYOffset + step);
로그인 후 복사

판단 애니메이션이 완료되었는지 여부, 완료되면 타이머를 닫습니다.clearInterval()

if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器
    clearInterval(obj.timer);
    //  判断是否传了回调函数
    /* if(callback) { 
        callback();
    } */
    // 可以简写为下边这种。 &&是短路运算符,存在callback(即第一个式子为true)时才会继续执行callback()
    callback && callback();
}
로그인 후 복사

상세 코드는 다음과 같습니다.




    
    
    
    返回顶部效果
    

    
        返回顶部     
    
头部区域
         
主体部分
    <script>         // querySelector() 方法返回匹配指定选择器()的第一个元素,传的必须是字符串         var sliderbar = document.querySelector('.slider-bar');         var banner = document.querySelector('.banner');         var bannerTop = banner.offsetTop; // banner模块距离顶部的长度         var sliderbarTop = sliderbar.offsetTop - bannerTop; // 侧边栏固定后距离顶部的长度         var main = document.querySelector('.main');         var goBack = document.querySelector('.goBack');         var mainTop = main.offsetTop;  // main模块距离顶部的长度                  // scroll 屏幕发生滚动事件时执行         document.addEventListener('scroll', function() {             if(window.pageYOffset >= bannerTop) {    // window.pageYOffset 屏幕被滚上去的距离                 sliderbar.style.position = 'fixed';   // 当用户滚到banner模块时使侧边栏变为固定状态                 sliderbar.style.top = sliderbarTop + 'px';              } else {                 sliderbar.style.position = 'absolute';                 sliderbar.style.top = '300px';             }                          if(window.pageYOffset >= mainTop) {    // 当用户滚到main模块时显示返回顶部按钮                 goBack.style.display = 'block';             } else {                 goBack.style.display = 'none';             }                      });         sliderbar.addEventListener('click', function() {             animate(window, 0);         })         /* 动画函数:          *  obj 做动画的对象(这里就是指window)          *  target 目标位置(顶部)          *  callback 回调函数(没有传参的话就不执行)          */         function animate(obj, target, callback) {             clearInterval(obj.timer);  // 先清除定时器,保证只有一个定时器在执行,以免出现bug             obj.timer = setInterval(function() {                 // window.pageYOffset距离顶部的距离(是负的)                 var step = (target - window.pageYOffset) / 10;  // step步长(让页面速度逐渐变慢的滑动上去)                 step = step &gt; 0 ? Math.ceil(step) : Math.floor(step); // step并不总是整数。大于零向上取整,小于零向下取整                 if(window.pageYOffset == target) {  // 当页面回到顶部后(即动画执行完) 清除定时器                     clearInterval(obj.timer);                     //  判断是否传了回调函数                     /* if(callback) {                          callback();                     } */                     // 可以简写为下边这种。 &&是短路运算符,存在callback(即第一个式子为true)时才会继续执行callback()                     callback && callback();                 }                 // window.scroll(x, y) 滚动到文档特定位置                 window.scroll(0, window.pageYOffset + step);             }, 15);         }     </script>
로그인 후 복사

더보기 멋진 자바스크립트 특수 효과 코드, 모두 포함: js 특수 효과 컬렉션

위 내용은 JavaScript는 Taobao의 맨 위로 돌아가기 효과를 모방합니다(코드 예).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:cnblogs.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿