Heim > Web-Frontend > HTML-Tutorial > CSS-返回顶部代码_html/css_WEB-ITnose

CSS-返回顶部代码_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:32:04
Original
2010 Leute haben es durchsucht

现在的网站基本上都是长页面,多的有四五屏,少的话也有两三屏,页面太长有的时候为了提升用户体验,会在页面右边出现一个回到顶部的按钮,这样能快速回到顶部,以免在滑动页面出现视觉屏幕,回到顶部一般有四种方式。

1.通过锚链接回到顶部,需要将body加入一个名为top的标记:

 

    <a href="#top" target="_self">回到顶部</a>
Nach dem Login kopieren

2.通过JavaScript的scroll回到顶部,控制水平和垂直方向:

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

3.通过JavaScript控制,缓慢向上滑动,不过不够平滑,代码参考如下:

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

    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);    }
Nach dem Login kopieren

4.当滚动条滚动到一定位置的时候显示,滚动条向上回滚的时候隐藏向上的回到顶部按钮,这种方式是最常用的方式:

    <div class="goTop">        <span>Go</span>    </div>
Nach dem Login kopieren

jQuery代码:

    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();    });
Nach dem Login kopieren

 CSS代码:

    //博客园-FlyElephant    .goTop {        height: 40px;        width: 40px;        background: red;        border-radius: 50px;        position: fixed;        top: 90%;        right: 3%;        display: none;    }        .goTop span {        color: #fff;        position: absolute;        top: 12px;        left: 8px;    }
Nach dem Login kopieren

 以上就是常用的样式,如有更好的方式,欢迎探讨~

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage