CSS, um einen schnellen Return-to-the-Top-Effekt zu erzielen

Hintergrund:

Heutzutage sind Websites grundsätzlich lange Seiten, die meisten haben vier oder fünf Bildschirme, manchmal haben sie zwei oder drei Bildschirme Um das Benutzererlebnis zu verbessern, wird auf der rechten Seite der Seite eine Schaltfläche „Zurück nach oben“ angezeigt, sodass Sie schnell nach oben zurückkehren können, um zu vermeiden, dass auf der verschiebbaren Seite ein visueller Bildschirm angezeigt wird nach oben zurückkehren.

1. Um über Ankerlinks nach oben zurückzukehren, müssen Sie dem Text ein Tag mit dem Namen top hinzufügen.

<a href="#top" target="_self">回到顶部</a>

2. Um über JavaScript nach oben zu scrollen, steuern Sie die horizontale und vertikale Richtungen

<a href="javascript:scroll(0,0)">JavaScript回到顶部<s/a>

3. Schieben Sie durch die JavaScript-Steuerung langsam nach oben, aber es ist nicht glatt genug

<a onclick="goScrollTop()">JavaScript缓慢向上滑动</a>

4. Wenn die Bildlaufleiste zu einer bestimmten Position scrollt, wird sie angezeigt Die Bildlaufleiste wird zurückgerollt, sie wird ausgeblendet und geht zurück nach oben. Schaltfläche, diese Methode ist die am häufigsten verwendete Methode

function goScrollTop() {
    //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）
    //向上是负数，向下是正数
    window.scrollBy(0, -100);
    //延时递归调用，模拟滚动向上效果
    scrolldelay = setTimeout('goScrollTop()', 100);
    //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值
    var sTop = document.documentElement.scrollTop + document.body.scrollTop;
    //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
    if (sTop == 0) clearTimeout(scrolldelay);
}

jQuery-Code:

<div class="goTop">
    <span>Go</span>
</div>

CSS-Code:

function goTop(min_height) {
    $(".goTop").click(
        function() {
            $('html,body').animate({
                scrollTop: 0
            }, 700);
        });
    //获取页面的最小高度，无传入值则默认为600像素
    min_height=min_height?min_height:400;
    //为窗口的scroll事件绑定处理函数
    $(window).scroll(function() {
        //获取窗口的滚动条的垂直位置
        var s = $(window).scrollTop();
        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
        if (s > min_height) {
            $(".goTop").fadeIn(100);
        } else {
            $(".goTop").fadeOut(200);
        }
    });
}
 
 
$(function() {
    goTop();
});

Empfohlenes Tutorial: CSS-Schnellstart

Wenn Sie den Back to Top-Effektcode herunterladen möchten, besuchen Sie bitte: Zurück zum oberen Code-Spalte!

Das obige ist der detaillierte Inhalt vonCSS, um einen schnellen Return-to-the-Top-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!