JS中锚点链接点击平滑滚动并自由调整到顶部位置


Posted in Javascript onFebruary 06, 2021

锚点链接点击平滑滚动并自由调整到顶部的位置

 一、添加锚点 注意a标签用的nacTo 而不是href;

<ul>
	<li><a class="anchor" navTo="one">目标选择</a></li>
	<li><a class="anchor" navTo="two">目标客户</a></li>
	<li><a class="anchor" navTo="three">广告形式</a></li>
	<li><a class="anchor" navTo="four">广告投放</a></li>
	<li><a class="anchor" navTo="five">预算和时间安排</a></li>
	<li><a class="anchor" navTo="six">转化追踪</a></li>
</ul>

二、给右侧需要滚动的内容添加对应的id

<div class="right">
			<div id="one">
				<div class="target">
					<i>您的目标是:</i>
					<div class="brand_engagement"><img src="img/signal.png" /><i>品牌参与度</i><b>更改</b></div>
					<p>我希望人们了解我的业务。</p>
					<div class="advertising_that">
						<img src="img/right.png" /> 广告将显示给最右可能浏览<b>您的广告的人群。</b>
					</div>
				</div>
			</div>
			<div id="two">
				第二部分内容
			</div>
			<div id="three">
				第三部分内容
			</div>
			<div id="four">
				第四部分内容
			</div>
			<div id="five">
				第五部分内容
			</div>
		</div>

三、添加js,平滑滚动到顶部的距离 (150是导航的高度,可根据需要自由调整)

$('.anchor').click(function () {
		var navto = $(this).attr('navto');
		if (navto != "#") {
			var $div = $('#' + navto);
			var top = $div.offset().top || 0;
			$('html,body').animate({
				'scroll-top': top - 150
			}, 500);
		} else {
			$('html,body').animate({
				'scroll-top': 0
			}, 500);
		}
	});

ok啦~ 效果展示

JS中锚点链接点击平滑滚动并自由调整到顶部位置

到此这篇关于JS中锚点链接点击平滑滚动并自由调整到顶部位置的文章就介绍到这了,更多相关js锚点链接平滑滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JS中Attr的用法详解
Oct 09 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
一起深入理解js中的事件对象
Feb 06 #Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
javascript中layim之查找好友查找群组
Feb 06 #Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 #Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
js通过canvas生成图片缩略图
2020/10/02 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python3.5仿微软计算器程序
2020/03/30 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python爬虫实现获取下一页代码
2020/03/13 Python
什么是python的函数体
2020/06/19 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
公司开业庆典策划方案
2014/06/04 职场文书
护理专业自荐书
2014/06/04 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
投资入股合作协议书
2014/10/28 职场文书
小学教研工作总结2015
2015/05/13 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
乔迁新居祝福语
2019/11/04 职场文书