js返回顶部封装 简洁:
加入html页面body最后面即可。
<script>
a();
function a() {
    $(function() {
        if ($(".j-to-top").length === 0) {
            var f = "<div class='j-to-top' style='display: none; position: fixed; bottom: 108px; right: 0; width: 42px; height: 42px; z-index: 10001'><img style='width: 100%;' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFUAAABUCAYAAADzqXv/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU1OTUxOTAzMzRBMTFFNEEwMEVEMkNDRjYzQ0NGREMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU1OTUxOTEzMzRBMTFFNEEwMEVEMkNDRjYzQ0NGREMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNTU5NTE4RTMzNEExMUU0QTAwRUQyQ0NGNjNDQ0ZEQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNTU5NTE4RjMzNEExMUU0QTAwRUQyQ0NGNjNDQ0ZEQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrHprYYAAAt+SURBVHja7J19TBNp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'/></div>";
            $("body").append(f);
        }
        var g = $(".j-to-top"),
        e = $(window).height() * 3;
        $(window).bind("scroll",
        function() {
            var h = document.documentElement.scrollTop || document.body.scrollTop;
            if (h > e) {
                g.show();
            } else {
                g.hide();
            }
        });
        g.bind("click",
        function() {
            $(this).hide();
            document.documentElement.scrollTop = 0;
            document.body.scrollTop = 0;
        });
    });
}

</script>

js返回顶部封装 简洁的更多相关文章

  1. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  2. 原生js返回顶部(匀速、由快到慢)

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  3. 原生JS返回顶部,带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  4. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  5. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  6. js 返回顶部

    <script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...

  7. 原生js返回顶部

    let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...

  8. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  9. 原生js实现简洁的返回顶部组件

    本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...

随机推荐

  1. 让Unity的Inspector面板支持字符限制(restrict)功能

    今天在优化红点组件,笔者打算将红点id由10进制改为16进制处理,就打算将红点id字段由uint类型改成string类型,用于填写16进制的字符(因为在Inspector面板里,uint/int类型字 ...

  2. vs项目和msql不兼容解决方案

    当vs的工程项目加载了libmysql.lib 即:附加包含目录,附加库目录,附加依赖项都设置好之后,如过编译出现如下: error LNK2019: 无法解析的外部符号 _mysql_real_co ...

  3. 使用 CKEditor 上传图片, 粘贴屏幕截图

    之前写过wangEditor,那真是好用,文档也清晰,半天就搞定了,无奈没有对应license,只好选择别的. 外语一般,阅读理解都靠蒙.CKEditor官方文档看的我云里雾里,国内的博客比较少,经过 ...

  4. phpmyadmin上传sql文件大小限制问题解决方案

    近几天在学生做项目时,需要使用phpmyadmin把本地数据库导入到线上数据库,有许多学生遇到了因为文件过大而上传失败的问题.今天给大家整理一下使用phpmyadmin遇到因为文件过大而导致上传失败问 ...

  5. php的八大数据类型

    1. 八大数据: bool 布尔类型:0,1:真假 integer 整形 float 浮点型 string 字符串 array 数组 object 对象,类,class resource 文件,图片, ...

  6. (中级篇 NettyNIO编解码开发)第八章-Google Protobuf 编解码-1

    Google的Protobuf在业界非常流行,很多商业项目选择Protobuf作为编解码框架,这里一起回顾一下Protobuf    的优点.(1)在谷歌内部长期使用,产品成熟度高:(2)跨语言,支持 ...

  7. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  8. 【Netty】ChannelHandler和codec

    一.前言 前面学习了Netty的codec框架,下面接着学习ChannelHandler与codec之间的关联. 二.ChannelHandler和codec Netty为不同的协议提供了处理器和编解 ...

  9. Akka(5): ConsistentHashing Router - 可选定Routee的任务分配模式

    上一篇讨论里我们介绍了几种任务分配(Routing)模式.Akka提供的几种现成智能化Routing模式大多数是通过对用户屏蔽具体的运算Routee选择方式来简化Router使用,提高智能程度,所以我 ...

  10. python 创建mysql数据库

    昨天用shell脚本创建数据库,涉及java调用,比较折腾,改用python直接创建数据库,比较方便,好了,直接上代码,相关注释也添加了 # _*_encoding:UTF-8_*_import My ...