jQuery-回到顶部练习

冷不防 2022-12-02 10:46 218阅读 0赞

描述：点击回到顶部，滚动条慢慢滚动到底部  
代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>回到顶部练习</title>
    		<style type="text/css">
    			#box3{
    				width: 70px;
    				height: 70px;
    				background-color: #00FFFF;
    				position: fixed;
    				cursor: pointer;
    				left: 1250px;
    				top: 500px;
    				font-size: 25px;
    				color: #F0FFFF;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				
    				//绑定单击相应函数
    				$("#box3").click(function(){
    					//获取要移动的总距离
    				var distance = $("html").scrollTop()+$("body").scrollTop();
    				//移动的总时间
    				var TotleTime = 500;
    				//间隔时间
    				var time = 50;
    				//要移动的次数
    				var items = TotleTime/time;
    				//每一次要移动的距离
    				var itemsDistance = distance/items;
    				var IntervalId = setInterval(function(){
    						distance -= itemsDistance;
    						$("html").scrollTop(distance)+$("body").scrollTop(distance)
    						if(distance<0){
    							distance=0;
    							clearInterval(IntervalId);
    						}
    					},time);
    				});
    				
    			});
    		</script>
    	</head>
    	<body style="height: 2000px;">
    		<div id="box3">回到顶部</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 页面刷新回到顶部

使用Jquery 设置刷新页面时，自动回到页面顶部 $("html,body").animate({ scrollTop: 0,

迈不过友情╰/ 2023年06月11日 09:23/ 0 赞/ 26 阅读

相关 jQuery-回到顶部练习

描述：点击回到顶部，滚动条慢慢滚动到底部代码如下： <!DOCTYPE html> <html> <head> <meta cha

冷不防/ 2022年12月02日 10:46/ 0 赞/ 219 阅读

相关利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能，现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。废话不多

怼烎@/ 2022年09月26日 02:27/ 0 赞/ 249 阅读

相关 jquery实现回到顶部效果

css: <style> div { width: 100%; height:

朱雀/ 2022年09月14日 09:09/ 0 赞/ 253 阅读

相关 11、jQuery插件之回到顶部插件

demo1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2022年06月15日 07:20/ 0 赞/ 283 阅读

相关回到顶部

[html元素固定定位fixed][html_fixed] 元素固定定位，比如：固定在右上角或者是在左下角，主流浏览器下，使用fixed就能实现，但是IE6不支持fixe

╰半夏微凉°/ 2022年06月02日 04:56/ 0 赞/ 359 阅读

相关回到顶部

<template> <div class=""> <div class="flexd"> <d

港控/mmm°/ 2021年12月19日 16:51/ 0 赞/ 462 阅读

相关回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定

Bertha 。/ 2021年10月19日 11:36/ 0 赞/ 508 阅读

相关回到顶部组件

回到顶部--组件 1.html 一个button足矣 <button class="back-to-top">返回顶部</button> 2.css 注

Myth丶恋晨/ 2021年10月09日 03:52/ 0 赞/ 488 阅读

相关 jquery经典实例之回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK">

野性酷女/ 2021年07月25日 02:36/ 0 赞/ 494 阅读