jquery实现返回顶部功能

先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部

<style>body {height: 2000px;}.back {position: fixed;width: 100px;height: 50px;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><div class="back">返回顶部</div><div class="container"></div>

<script>$(function () {$(window).scroll(function () {//检测滚走的高度var scrollT = $(document).scrollTop();//当滚走的高度>=400(天蓝色色块的上边距)，//显示返回顶部(.back)，否则隐藏返回顶部//获取蓝色色块(container)距离文档顶部的距离var offsetT = $(".container").offset().top;//进行判断if (scrollT >= offsetT) {$(".back").show()} else {$(".back").hide()}})//点击返回顶部，页面滚走的距离设置为0$(".back").click(function(){//生硬的返回// $(document).scrollTop(0)//动感的返回//animate({键:值},时间) 属性：scrollTop---必须是被元素调用$("html,body").animate({scrollTop:0},1000)})})</script>

jquery实现返回顶部功能相关推荐

js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 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()& ...

jquery实现返回顶部功能

jquery实现返回顶部功能相关推荐

最新文章

热门文章