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 ...
随机推荐
- js进行MD5加密（含中文），与后台JAVA加密之后结果不同（解决）
开发小程序过程中与后台进行接口沟通,前期接口经过MD5加密和AES加密之后,后台进行解密. 今天出现一种情况,我前台加密之后的md5串与后台加密不同,后台发现可能是带用中文的原因, 这是加密之前的串: ...
- debian8 vga 文本模式下出现闪屏
这种问题是因为 grub 里面关于 分辨率大小不对的问题. 在 debian 里面,在文件 /boot/grub/grub.cfg 里面可以添加 vga 参数配置. 如下: 在 kernel 启动参数 ...
- CentOS6非root用户下安装及配置CDH5.3.0
#install lsb packagesudo yum install -y redhat-lsb #install net-tools package sudo yum install -y ne ...
- IDEA快捷键无法使用
IDEA快捷键无法使用 觉得有用的话,欢迎一起讨论相互学习~Follow Me 今天新换了一台主机,但是很奇怪的是自己的IDEA快捷键使用不了了,以为是主机还是硬件的问题,最终解决后,发现是软件之间的 ...
- java发送application/json格式的post请求，需要登陆
package util; import java.io.IOException; import java.io.InputStream; import java.io.OutputStreamWri ...
- 开发日记：DotNetCore 批处理 发布
@echo off@title 中医科院 - 发布@echo ******************************************************@echo ========= ...
- jenkins自动化视频地址
1.腾讯课堂的视频 http://www.ctnrs.com/study.html 我的课程所有列表 2.百度网盘里面的
- 配置SSH无密码登录【原著】
环境:两台Centos虚拟机,配置了静态的ip.(详见虚拟机如何配置静态的IP地址的操作步骤) 192.168.75.21192.168.75.22 第一步:为每台服务器配置静态IP地址参见: 虚拟机 ...
- Highcharts 宽度溢出容器
1,设置Highcharts的动态宽高. 获取Highcharts图表需要的宽高值,给到Highcharts图表的div容器. 如:var hpvCountSendDateHei = $(" ...
- java.lang.IllegalArgumentException，java.util.zip.ZipException 解决办法
控制台错误信息: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apac ...