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 ...
随机推荐
- docker使用dnnmmp安装gocron
使用dnnmmp安装mysql和phpmyadmin默认使用dnnmmp_default网络,因为在安装其他依赖mysql的应用时,需指定网络 ,同时需指定mysql名称 原命令: docker ru ...
- systemctl start docker失败，提示start request repeated too quickly for docker.service
情景说明 本来服务器docker服务运行的很好,但客户重启了服务器-于是服务有些问题,遂进入到服务器再次启动docker及服务.不料提示上面的错误-- 解决办法 尝试1 Google了一圈,发现说法很 ...
- 用GEOquery从GEO数据库下载数据--转载
https://www.plob.org/article/9969.html Gene Expression Omnibus database (GEO)是由NCBI负责维护的一个数据库,设计初衷是为 ...
- Go 切片：用法和本质
2011/01/05 引言 Go的切片类型为处理同类型数据序列提供一个方便而高效的方式. 切片有些类似于其他语言中的数组,但是有一些不同寻常的特性. 本文将深入切片的本质,并讲解它的用法. 数组 Go ...
- testng失败自动重试
使用的监听类有:IRetryAnalyzer.TestListenerAdapter.IAnnotationTransformer public class Retry implements IRet ...
- cordova 的安桌动画
1.cordova 的安桌动画cordova plugin add cordova-plugin-lottie-splashscreenhttps://github.com/timbru31/cord ...
- 自动以读写方式挂载ntfs（新）-苹果之路
之前的mac下挂载ntfs磁盘的方法在新版本的macos下失效了:<自动以读写方式挂载ntfs-黑苹果之路>,现提供一个有效的方法,系统版本:白苹果10.14.6,参见<Mac OS ...
- ODAC 安裝 （11.2.4）
1.下载解压 下载ODCA 安装包,下载地址:http://www.oracle.com/technetwork/database/windows/downloads/index-090165.htm ...
- Spring boot启动成功后输出提示
添加logback-spring.xml,将log输出到文件,控制台输出的level改为error因此只会出处banner src/main/resources/banner.txt的内容为 star ...
- 利用docker搭建RTMP直播流服务器实现直播
一.rtmp服务器搭建 环境: centos 7.* 1.先安装docker(省略) 2.下载docker容器 docker pull alfg/nginx-rtmp 3.运行容器(记得打开防火墙端口 ...