zurück zum Seitenanfang Zusammenfassung-js-Tutorial-php.cn

zurück zum Seitenanfang Zusammenfassung

高洛峰

Freigeben： 2016-10-08 14:28:46

Original

1516 Leute haben es durchsucht

Die Funktion „Zurück zum Anfang“ auf der Website ist von Vorteil, um das Benutzererlebnis zu verbessern. Wenn eine Seite sehr lang ist, ist es wichtig, zum Anfang zurückzukehren.

Zurück zur oberen Schaltfläche: Sie können Bilder, Hintergrundbilder, Vektorschriftsymbole oder Code-CSS zum Generieren verwenden. Hier wird die CSS-generierte Methode verwendet.

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

Nach dem Login kopieren

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);
}

Nach dem Login kopieren

Die verschiedenen Methoden zur Rückkehr nach oben sind wie folgt zusammengefasst:

1. Anker-Tag

# enthält eine Standortinformation. Der Standardanker ist #top ist der Anfang der Webseite.

Methode:

1. Verwenden Sie das Anker-Tag für die Schaltfläche „Zurück nach oben“, also ein Tag,

2. Platzieren Sie das Positionierungsziel oben auf der Seite, , wo der Name steht attribute und id attribute Der Wert ist ein # kleiner als der Wert des href-Attributs im ersten Schritt. Wählen Sie einfach einen von name und id aus.

Nachteil:

enthält zusätzliche #-Symbole in der Adressleiste.

2. JavaScript-Scroll-Ereignis:

Zurück nach oben

Scroll(0, 0) Der erste Parameter ist die horizontale Position relativ zum Bildschirm und der zweite Parameter ist die vertikale Position relativ zum Bildschirm. Jeder dieser Werte kann angepasst werden.

3. Die Animation kehrt langsam nach oben zurück:

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;
});

Nach dem Login kopieren