jQuery-使页面回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>back-top</title>
<style type="text/css">
#back-top{
width: 40px;
height: 40px;
position: fixed;
bottom: 40px;
right: 20px;
border: solid gray;
text-align: center;
font-size: 14px;
cursor: pointer;
} .contain {
margin: 0 auto;
width: 1000px;
height: 2000px;
background: red;
font-size: 400px;
}
</style>
<script src="jquery-3.4.1.js"></script>
<script>
$(function(){
$('#back-top').click(function(){
// html，body取并级，处理浏览器兼容
$("html,body").animate({
scrollTop: 0,
screenLeft: 0,
}, 400);
});
});
</script>
</head>
<body>
<div id="back-top">回到顶部</div>
<div class="contain">这里是内容</div>
</body>
</html>
结果
jQuery-使页面回到顶部的更多相关文章
- jQuery实现页面回到顶部功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery 插件页面回到顶部
引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300' ...
- jQuery写toTop(回到顶部)效果
在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...
- js——页面回到顶部
很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html&g ...
- 【JQ+锚标记实现点击页面回到顶部】
前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 jQuery 页面回到顶部
function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#t ...
- JS实现页面回到顶部效果
[代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jQuery中页面返回顶部的方法总结
当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...
随机推荐
- Java一行代码
1.整数格式化成0X 的形式字符串 String hour=String.format("%02d", txtWaringTime.getCurrentHour()); Strin ...
- linux下如何使用adb连接在qemu中运行的安卓系统？
1. 运行安卓系统, 如下: $sudo qemu-system-x86_64 -m 4096 -boot d -enable-kvm -smp 3 -net nic -net user,hostfw ...
- SNF快速开发平台2019-权限管理模型实践-权限都在这里
其它权限实践系列文章: 1.角色.权限.账户的概念理解-非常全的理论讲解权限控制 https://www.cnblogs.com/spring_wang/p/10954370.html 2.权限管理模 ...
- 开源插件 ：MahApps.Metro.IconPacks
详见英文版:https://github.com/MahApps/MahApps.Metro.IconPacks/wiki 源代码名称:MahApps.Metro.IconPacks 源代码网址:ht ...
- Django入门3 简单留言板项目案例及mysql驱动的安装配置
新建jangostart项目 使用manager.py新建app即单独的应用 创建一个message应用 manage.py@djangostart > startapp message 如果a ...
- 巧用List.stream()方法对List做处理
List.steam()的强大之处在此不做赘述. 直接进入主题: 1.过滤Bean List中,某些字段等于指定值的所有行 List<Member> list = itemsArray.t ...
- IfcAxis2Placement3D
The IfcAxis2Placement3D provides location and orientations to place items in a three-dimensional spa ...
- IntelliJ IDEA 安装使用 FindBugs 代码分析详述
1 下载 2 重启idea 选中文件,右键 附:一些常见的错误信息 Bad practice 代码中的一些坏习惯 Class names should start with an upper case ...
- github 被强了！太丧心病狂了！
github 不强了! github 不能访问了! github 打不开了! github 被封了... - ping 都 ping 不通, 本地 ping 不通, 服务器 ping 不通. - 本地 ...
- 【论文阅读】3DMM-A Morphable Model for The Synthesis of 3D Faces
前言 参考 1. 2. 完