Jquery锚点缓慢移动到目标位置

缺乏、安全感 2022-01-23 14:59 301阅读 0赞

### 非常简单的代码，不需要再使用插件！ ###

###### 页面代码如下 ######

<!DOCTYPE html>
    <html>
    <head>
    	<title>锚点缓慢移动</title>
    </head>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
    <style type="text/css">
    	nav span {padding: 10px;margin-right: 4px;}
    	.box {height: 400px;width: 100%;background: #e2e2e2;margin-bottom: 30px;}
    </style>
    <body>
    	<nav>
    		<span>介绍</span>
    		<span>案例</span>
    		<span id="team_a">团队</span>
    		<span>联系</span>
    	</nav>
    	<div class="box">这是介绍</div>
    	<div class="box">这是案例</div>
    	<div class="team box">这是团队</div>
    	<div class="box">这是联系</div>
    
    	<script type="text/javascript">
    		$('#team_a').click(function(){
    	    $('html,body').animate({
    	      scrollTop:$('.team').offset().top
    	    }, 800);}); 
    	</script>
    </body>
    </html>

###### 效果如下 ######

![Jquery锚点缓慢移动到目标位置][Jquery]

[Jquery]: /images/20220123/6c8061118ecc486d933ebdc99141aaf5.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方

谁践踏了优雅/ 2023年06月15日 06:41/ 0 赞/ 19 阅读

相关 jquery 锚点滚动

$("html,body").animate(\{scrollTop:$("\li\_hou").offset().top\},800) redis 控制台使用：

╰半夏微凉°/ 2022年08月09日 03:27/ 0 赞/ 176 阅读

相关 js跳转到锚点

1，在页面添加location.hash可实现无论哪个页面跳到该页面都跳到固定位置。 <script language="[JavaScript][]">

雨点打透心脏的1/2处/ 2022年07月16日 11:12/ 0 赞/ 315 阅读

相关 a标签跳转锚点到页面指定位置

代码如下： JS方式: <!DOCTYPE html> <html> <head> <meta charset="utf-

淩亂°似流年/ 2022年07月12日 06:21/ 0 赞/ 387 阅读

相关 JQuery 锚点连接屏幕滚动

<!DOCTYPE html> <html class="no-js" lang="en"><head> <meta http-equiv="conte

我就是我/ 2022年06月08日 08:28/ 0 赞/ 195 阅读

相关 Markdown 页面内锚点跳转，跳转到指定位置

作者：LoveEmperor-王子様 Markdown 页面内锚点跳转，跳转到指定位置目录添加`[目录](id)`，`id`目标地点为锚点： ![在

电玩女神/ 2022年04月16日 00:17/ 0 赞/ 505 阅读

相关使用a锚点跳转到页面指定位置

<a href="reviewDetails">查看审核详情</a> <h4 id="reviewDetails" class="font_bold">开题报告

末蓝、/ 2022年03月16日 10:00/ 0 赞/ 348 阅读

相关 Jquery锚点缓慢移动到目标位置

非常简单的代码，不需要再使用插件！页面代码如下 <!DOCTYPE html> <html> <head> <title>锚点缓

缺乏、安全感/ 2022年01月23日 14:59/ 0 赞/ 302 阅读

相关 MarkDown页面添加锚点,跳转到本页指定位置

MarkDown页面添加锚点,跳转到本页指定位置 -------------------- 目录 1. MarkDown页面内跳转测试 2. MarkDown

缺乏、安全感/ 2022年01月17日 06:45/ 0 赞/ 1086 阅读

相关 Vue - 设置锚点，定位到固定位置

<template> <div class="wrap"> <ul> <li><a href="javascript:v

ゝ一世哀愁。/ 2021年07月25日 22:43/ 0 赞/ 744 阅读