맨 위로 요약으로 돌아가기-JS 튜토리얼-php.cn

맨 위로 요약으로 돌아가기

高洛峰

풀어 주다： 2016-10-08 14:28:46

원래의

1512명이 탐색했습니다.

웹사이트의 맨 위로 돌아가기 기능은 사용자 경험을 향상시키는 데 도움이 됩니다. 페이지가 너무 길면 맨 위로 돌아가는 것이 필수적입니다.

상단 버튼으로 돌아가서 사진, 배경 이미지, 벡터 글꼴 아이콘을 사용하거나 코드 CSS를 사용하여 생성할 수 있습니다. 여기서는 CSS 생성 방법이 사용됩니다.

html:<a href="" title="回到顶部" id="toTop">
    <span id="arrow"></span></a>

로그인 후 복사

css:
#toTop {
    display: none;
    position: fixed; /* 固定定位 */
    right: 10px;
    bottom: 30px;
    background-color: #e6e6e6;
    height: 40px;
    line-height: 40px;
    width: 40px;
    transition: all .4s ease .1s;
}#toTop:hover { background-color: #b7b7b7; }#toTop span {
    position: relative; /* 相对定位，以便其伪元素绝对定位 */
    top: 5px;
    left: 15px; /* 变换为顺时针旋转 30°，通过数学角度计算后适当调整位置 */
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
}#toTop span:after {
    content: "";
    position: absolute; /* 伪元素中是相对于 #toTop span 绝对定位 */
    top: -5px;
    left: 8px;
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

로그인 후 복사

상위로 돌아가는 다양한 방법을 정리하면 다음과 같습니다.

1. 앵커 태그

#에는 기본 앵커가 포함되어 있습니다. #top은 웹페이지의 상단입니다.

방법:

1. 맨 위로 이동 버튼에 앵커 태그, 즉

2. 페이지 상단에 위치 지정 대상을 배치합니다. attribute 및 id 속성 값은 첫 번째 단계의 href 속성 값보다 # 하나 적습니다. name과 id 중 하나만 선택하세요.

단점:

의 주소 표시줄에 # 기호가 추가로 표시됩니다.

2. 자바스크립트 스크롤 이벤트:

맨 위로 돌아가기

Scroll(0, 0) 첫 번째 매개변수는 화면을 기준으로 한 가로 위치, 두 번째 매개변수는 화면을 기준으로 한 세로 위치입니다. 이러한 값은 모두 조정될 수 있습니다.

3. animate가 천천히 상위로 돌아갑니다.

js:
$(window).scroll(function () {    if($(window).scrollTop()>=100) {
        $("#toTop").fadeIn(400); /* 当滑动到不小于 100px 时，回到顶部图标显示 */
    }else {
        $("#toTop").fadeOut(400); /* 当滑动到小于(页面被卷去的高度) 100px 时，回到顶部图标隐藏 */
    }
});
$("#toTop").click(function () { 
    $("html, body").animate({scrollTop: 0}, 100); /* 持续时间为 100ms */    return false;
});

로그인 후 복사