기본 JS에서 최상위 효과로 돌아가는 방법은 무엇입니까? (상해)

이 기사에서는 기본 JS를 사용하여 최상위 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

최근에 온라인에서 사례 튜토리얼을 봤습니다 - 최상위 효과로 돌아가기(네이티브 js 구현). 이 효과가 더 실용적이고 어렵지 않아서 한번 읽어보고 효과도 나쁘지 않아서 혹시 필요할까봐 메모해두었어요!

<a href="javascript:;" id="btn" title="回到顶部"></a>

이 a 태그는 상단으로 돌아가는 링크를 구현하는 데 사용됩니다. 여기서 href="javascript:;"는 스크롤 막대를 반환하기 위해 클릭 이벤트를 트리거하려고 하기 때문에 a 태그의 기본 동작을 방지하는 데 사용됩니다. 점프 페이지가 아닌 상단으로 이동합니다. 물론 href=""로 설정하면 기본적으로 페이지 상단으로 이동하지만 사용자 경험은 상대적으로 열악합니다. 자, a 태그의 스타일을 설정해 보겠습니다.

#btn {width:40px; height:40px; position:fixed; right:25px; bottom:10px; display:none; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}

여기서 a 태그는 고정되어 있으며 position:fixed를 통해 페이지 오른쪽 하단에 배치됩니다. 특정 위치는 오른쪽을 통해 미세 조정할 수 있습니다. 그리고 바닥. 위 사진인 a 태그에 배경 이미지를 설정합니다. 기본값은 이미지의 상반부, 즉 40 X 40 으로 표시됩니다. 이미지 크기(40 X 80) 로 인해 배경 위치는 달라질 수 있습니다. 바로 왼쪽 상단으로 설정됩니다.

그리고 기본적으로 페이지를 스크롤할 때 스크롤 높이가 컴퓨터의 보이는 영역보다 크면 a 태그가 먼저 표시됩니다. 이는 주로 JS로 구현됩니다. , 아래에서 논의됩니다!

태그의 플로팅 효과는 실제로 매우 간단합니다. 자세한 내용은 위의 CSS 코드를 참조하세요.

이제 맨 위로 돌아가기 버튼 스타일을 사용할 수 있으므로 다음 단계는 JS를 사용하여 버튼을 클릭할 때 맨 위로 돌아가는 효과를 얻는 것입니다.

window.onload = function(){
    var obtn = document.getElementById('btn');  //获取回到顶部按钮的ID
    var clientHeight = document.documentElement.clientHeight;   //获取可视区域的高度
    var timer = null; //定义一个定时器
    var isTop = true; //定义一个布尔值，用于判断是否到达顶部

    window.onscroll = function(){         //滚动条滚动事件

        //获取滚动条的滚动高度
        var osTop = document.documentElement.scrollTop || document.body.scrollTop; 

        if(osTop >= clientHeight){  //如果滚动高度大于可视区域高度，则显示回到顶部按钮
            obtn.style.display = 'block';
        }else{         //否则隐藏
            obtn.style.display = 'none';
        }

        //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
        if(!isTop){

            clearInterval(timer);
        }
        isTop = false;

    }

    obtn.onclick = function(){    //回到顶部按钮点击事件
        //设置一个定时器
        timer = setInterval(function(){
            //获取滚动条的滚动高度
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //用于设置速度差，产生缓动的效果
            var speed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
            isTop =true;  //用于阻止滚动事件清除定时器
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

여기서 즉, 최상위로 돌아가는 효과를 얻을 수 있으며 브라우저에서 이를 테스트할 수 있습니다. 실제로 최고 효과를 달성하는 방법에는 여러 가지가 있습니다. 참고할 수 있는 구현 계획은 다음과 같습니다.

더 많은 맨 위로 복귀 기능 특수 효과 코드를 보려면 다음을 방문하세요. 맨 위로 돌아가기 열

[관련 권장 사항]

5 단순 맨 위로 복귀 특수 효과 코드(컬렉션)

html5 엄선된 특수 효과 코드 공유(컬렉션)

무료로 다운로드할 수 있는 유용한 온라인 플로팅 QQ 고객 서비스 코드 5개 추천(고품질)

실용적이고 아름다운 웹페이지 플로팅 QR 코드 특수 효과 코드 5개 추천

위 내용은 기본 JS에서 최상위 효과로 돌아가는 방법은 무엇입니까? (상해)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!