JQ之控制回到顶部的速度

骑猪看日落 2022-05-15 14:11 177阅读 0赞

> 效果：通过JQ控制返回顶部的速度

代码如下（复制可直接使用） ：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{padding: 0;margin: 0;}
    		</style>
    		<script src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
    	</head>
    	<body>
    		<div style="width:100%;height:1900px;background-color: bisque;"></div>
    		<a href="#" id="go">回到顶部</a>
    	</body>
    	<script type="text/javascript">
    			//1：jQuery.fn是jQuery的原型对象也可以写成 $.fn
    			//2：添加myScrollTo方法到jQuery原型($.fn) 
    			jQuery.fn.myScrollTo = function(speed) {
    				var targetOffset = $(this).offset().top;
    				console.log(targetOffset);//去除默认样式后是 0 
    				//$(this).offset()：获得位移对象（此时其实啥也没做）
    				//$(this).offset().top：获得位移高度
    				$('html,body').stop().animate({scrollTop: targetOffset}, speed);
    				return this;
    			}; 
    			
    			// 使用自定义的方法
    			$("#go").click(function(){
    				$("body").myScrollTo(500);//调用，并传入速度
    				return false;//阻止默认事件
    			});	
    			
            </script>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 JQ之返回顶部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

比眉伴天荒/ 2022年07月12日 01:14/ 0 赞/ 218 阅读

相关回到顶部

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

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

相关 JQ之控制回到顶部的速度

> 效果：通过JQ控制返回顶部的速度代码如下（复制可直接使用）： <!DOCTYPE html> <html> <head> <m

骑猪看日落/ 2022年05月15日 14:11/ 0 赞/ 178 阅读

相关 JS原生之回到顶部。

> 欢迎评论，指出不足，表达建议~ <!-- a 标签的a:hover兼容所有浏览器。默认跳转页面，没有值得话，刷新本页面。写target：锚点

向右看齐/ 2022年05月14日 03:25/ 0 赞/ 210 阅读

相关回到顶部

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

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

相关回到顶部效果

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

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

相关回到顶部组件

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

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

相关 JS基础之实现回到顶部

首先需要引入tween.js动画库 ![70][] 点击该按钮,页面会回到顶部,并伴随一定动画 <!DOCTYPE html> <html lang="z

Dear 丶/ 2021年09月15日 19:42/ 0 赞/ 408 阅读

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

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

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

相关 jq 尺寸大小、偏移量、动画回到顶部方式

宽尺寸 $('选择器').width() 内容宽度 $('选择器').innerWidth() 内容宽度和padding宽度

朴灿烈づ我的快乐病毒、/ 2021年07月25日 00:24/ 0 赞/ 335 阅读