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系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
一起深入理解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页面消耗内存过大的处理办法
2013/03/18 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python之多进程与多线程的使用
2021/02/23 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
学生实习自我鉴定
2013/10/11 职场文书
医院护士工作检讨书
2014/10/26 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
一年级小学生评语大全
2014/12/25 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
MySQL笔记 —SQL运算符
2022/01/18 MySQL