js返回顶部封装 简洁
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返回顶部封装 简洁的更多相关文章
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 原生js返回顶部(匀速、由快到慢)
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- 原生JS返回顶部,带返回效果
有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- js返回顶部
1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...
- js 返回顶部
<script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...
- 原生js返回顶部
let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- 原生js实现简洁的返回顶部组件
本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面 ...
随机推荐
- [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers
//又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...
- Linux与堆栈概念
在学习C/C++编程的时候,老师都会反复灌输一些概念.比如程序内变量在堆栈上的分配,栈是由高地址到低地址,堆是由低地址到高地址等等,然后画出这样一幅经典概念图: 图片来自:http://blog.cs ...
- Vector的浅析
Vector 可实现自动增长的对象数组.java.util.vector 提供了向量类(vector)以实现类似动态数组的功能.在Java语言中没有指针的概念,但如果正确灵活地使用指针又确实可以大大提 ...
- JAVA并发编程实战---第三章:对象的共享
在没有同步的情况下,编译器.处理器以及运行时等都可能对操作的执行顺序进行一些意想不到的调整.在缺乏足够同步的多线程程序中,要对内存操作的执行顺序进行判断几乎无法得到正确的结果. 非原子的64位操作 当 ...
- OpenCV探索之路(五):图片缩放和图像金字塔
对图像进行缩放的最简单方法当然是调用resize函数啦! resize函数可以将源图像精确地转化为指定尺寸的目标图像. 要缩小图像,一般推荐使用CV_INETR_AREA来插值:若要放大图像,推荐使用 ...
- Day3-递归函数、高阶函数、匿名函数
一.递归函数 定义:函数内部可以调用其它函数,如果调用自身,就叫递归. 递归特性: 1.必须有结束条件退出: >>> def calc(n): ... print(n) ... re ...
- Java UDP Socket
本文转载地址: Java学习路上的收获:http://blog.csdn.net/qinpeng100423/article/details/8980423 一. UDP协议定义 U ...
- swift学习 - 分类(Extensions)
在oc中为了增强已有类的功能,我们经常使用分类.使用分类,我们可以在不破坏原有类的结构的前提下,对原有类进行模块化的扩展. 但是在swift中没有分类这种写法了.相对应的是swift中只有扩展(Ext ...
- JavaScript基础(.....持续待更)
javascript热身 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...
- js继承之原型链继承
面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...