<form id="ivb0m"><span id="ivb0m"><track id="ivb0m"></track></span></form>

  • <nav id="ivb0m"></nav>

            返回到网页顶部代码三人行:javascript平滑滚动+jquery回到顶部+jquery滑动过度效果

            古老版html一行链接返回顶部

            上古时代的互联网,返回顶部代码就是html中的一行a标签。如下:

            <a href="#top">返回顶部</a>

            然到了如今这个强调动效和交互体验的前端发达时代,如果点击上边这个返回顶部,蹭的一下就直接跳到顶部,那显得有点儿太生硬和直接了,有没有用户体验更好一点儿的返回顶部代码呢?

            返回顶部代码

            当然是有。要不javascriptjquery哪来的用武之地。

            纯javascript 平滑滚动到页面顶部

            html:

            <body id="top">
            <a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>

            javascript:

            var timeOut;
            function scrollToTop() {
            if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
            window.scrollBy(0,-50);
            timeOut=setTimeout('scrollToTop()',10);
            }
            else clearTimeout(timeOut);
            }

            jquery回到页面顶部(自动显示或隐藏)代码

            此外嘛,就是用jquery来搞定。以下是一个示例。

            html:

            <p id="top">
            
            <a href="#top"><span></span>返回顶部</a>
            
            </p>

            jquery:

            <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>
            
            <script>
            
            $(document).ready(function(e) {
            
            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
            
            $(function () {
            
            $(window).scroll(function(){
            
            if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头
            
            $("#top").fadeIn(1500); ?//大于1500行时跳转箭头慢慢透明显示
            
            }
            
            else
            
            {
            
            $("#top").fadeOut(1500); ?//大于1500行时跳转箭头慢慢透明消失
            
            }
            
            });
            
            //当点击跳转链接后,回到页面顶部位置
            
            $("#top").click(function(){
            
            $('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
            
            return false;
            
            });
            
            });
            
            
            
            
            });
            
            </script>

            jQuery“返回顶部”滑动过度效果

            利用jQuery,直接在网站底部文件加代码:

            <a?href="#"?id="top">?返?回?顶?部?</a>

            CSS代码,使用了fixed让对象固定于浏览器窗口:

            #top{position:fixed;bottom:0;right:10px;}
            

            调用jquery.js文件:

            <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script>

            jQuery代码,注意正常使用的几个条件:

            $('#top').click(function(){$('html,body').animate({scrollTop:?'0px'},?800);});

            当然,还有其它更有趣、好玩、实用的返回顶部代码,前端无秘密,只要发现别的网站有更漂亮的、新颖的,直接扒下来就好。 不会扒,那就去好好学习javascript和jquery吧,至少得入门!

            本文链接:肖运华 » 网站策划设计制作优化 » 返回到网页顶部代码三人行:javascript平滑滚动+jquery回到顶部+jquery滑动过度效果
            转载请注明:http://www.gipsh.com/2248.html

            发表评论

            电子邮件地址不会被公开。

            极速赛车10选1稳_Welcome