简单的返回顶部特效

访客4年前关于黑客接单982
首先引入jQuery
js代码如下
$(function(){
        //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $("#backtop").css("bottom","1px");
                }
                else
                {
                    $("#backtop").css("bottom","-100px");
                }
            });

            //当点击跳转链接后,回到页面顶部位置
            $("#backtop").click(function(){
                //$('body,html').animate({scrollTop:0},1000);
        if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 1000);
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 1000);
                 return false;            
           });       
     });    
});

css

#backtop{position:fixed;right:7.5%;bottom:-100px;z-index:2;overflow:auto;width:54px;height:54px;border-top-right-radius:50px;border-top-left-radius:50px;background-image:url(btt.png);background-position:0 0;cursor:pointer;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out}

html

<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>

图片素材


相关文章

资源网,博客文章页面增加访问停留时间代码

资源网,博客文章页面增加访问停留时间代码 <!-- 统计访客停留时间 --> <div id="tingliu"> </span> <span clas...

js获取当前位置

手机端获取城市名称 百度地图接口 引入百度api<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"...

浏览器网页定时刷新代码教程分享

浏览器网页定时刷新代码教程分享,只需要一段js代码 首先F12打开控制器面板,复制刷新代码 timeout=prompt("Set timeout (Second):"); count=...

[JS]文字逐字打出

好久不更新了 [JS]文字逐字打出 代码如下 <!DOCTYPE html> <html>     <head>         <meta char...

简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

1.$.getJSON   $.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用,其语法的格式为: $.getJSON(       url,             ...

网站标题特效集合

js 判断页面切换时,标题改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...