jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon。
2. 绑定window 的scroll事件,即发生scroll事件,则进行按钮的显示隐藏的操作判断。
判断方法是:滚动条垂直高度大于某个值,则显示按钮(show());否则则隐藏按钮(hide());
3. 绑定点击返回顶部按钮的事件,给予一个动画,scroll到顶部(可以以body标签的位置作为参考)
例码如下:
html:
<div class="backToTop" title = "Back to top" style="display:none"><a href="#"><i class="angle up huge icon"></i></a></div>
css:
.backToTop { background:rgba(0,120,255,0.7); position:fixed; bottom:6%; right:7%; }
.backToTop a {display: block;line-height: 55px; height: 55px;}
js:
function goToTop(options){
var opts = {
bottomDistance:60,//距页面下边距离
rightDistance:100,//距页面右边距离
startline:20,//出现回到顶部按钮的滚动条scrollTop距离
duration:200,//回到顶部的速度时间
targetObg:"body"//目标位置
};
var $window=$(window);
var $this = options;
clearTimeout(goToTopTime);
var goToTopTime=setTimeout(function(){
var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;
if (shouldvisible){
$this.stop().show();
}else{
$this.stop().hide();
}
// $this.css({
// position: 'fixed',
// bottom: opts.bottomDistance,
// right: opts.rightDistance
// });
},30);
$this.click(function(event){
$('html,body').stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
$this.blur();
event.preventDefault();
event.stopPropagation();
});
};
var backToTop = function(){
var $backToTop = $(".backToTop");
goToTop($backToTop);
$(window).bind('scroll resize',function(){
goToTop($backToTop);
});
};
转载于:https://blog.51cto.com/sikana/1672913
jquery 实现返回顶部功能相关推荐
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- 前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能 功能实现:网页右下角的一键返回顶部图标 方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
- HTML 返回顶部功能
HTML 最简单实现返回顶部功能 1.添加一个超链接,然后给其href="#top",则可以实现返回顶部 可以和img标签结合使用实现功能. 2.给body标签设置id,添加超链接 ...
- jQuery实现返回顶部
jQuery实现返回顶部(gotop) 最常见的返回顶部大多是用 js 或者 jQ写出来的,但也有少部分直接用的 HTML 锚点实现的,自我感觉,返回顶部这个特效用锚点带来的用户体验不 ...
- Bilibili返回顶部功能实现
Bilibili返回顶部功能实现 文章目录 Bilibili返回顶部功能实现 实现原理 1. 图 2. 实现代码 最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
- 使用jQuery实现返回顶部
目录 前言 效果图 实现 完整的style和body部分HTML代码 前言 最近要设计一个网页,想实现一个类似于菜鸟教程的返回顶部按钮,但找了很久都没找着合适的实现方法,最后自己结合菜鸟教程的设置和网 ...
- 网页返回顶部功能实现
一.效果图: 二.准备工作: jquery-3.6.0.min.js下载(链接如下) Download jQuery | jQuery 如图,右键选择Download the compressed.. ...
- 前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
最新文章
- ZooKeeper演示案例
- 从易于扩展扩展的角度来设计FizzBuzzWhizz
- LeetCode 1 两数之和
- pythoninput函数作用_学习python之input()函数
- 文巾解题 45. 跳跃游戏 II
- 在SQL Server2005中进行错误捕捉
- 数据全裸时代,你的隐私有多容易获取?
- mysql缓存淘汰机制_聊聊缓存淘汰算法-LRU 实现原理
- 限时免费!Cell旗下 Heliyon 多学科特刊征稿
- Ubuntu开机启动Python脚本
- Flink】Flink连接prometheus 端口报错 Invalid host/port configuration. Host xxx Port -1
- TCP的流量控制和阻塞控制
- 算法导论第八章__实现计数排序
- iOS 9 适配中出现的坑
- L298N电机驱动模块《转》。
- paip.使用泛型时未能找到类型或命名空间名称“T
- vue中使用使用阿里云的iconfont
- 人工智能简史+电子版原文
- 用python制作上海疫情评论词云图-自定义形状
- java贪吃蛇碰撞判定分析_java贪吃蛇碰撞检测