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 相关文章推荐
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
js css+html实现简单的日历
Jul 14 Javascript
js模拟微博发布消息
Feb 23 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
VUE长按事件需求详解
Oct 18 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
JS实现的A*寻路算法详解
Dec 14 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
基于jquery的分页控件(C#)
2011/01/06 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
flask中过滤器的使用详解
2018/08/01 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python的faker库用法
2019/11/28 Python
Python字节单位转换实例
2019/12/05 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python类成员继承重写的实现
2020/09/16 Python
编写python代码实现简单抽奖器
2020/10/20 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
super()与this()的区别
2016/01/17 面试题
《草原的早晨》教学反思
2014/04/08 职场文书
会计求职信
2014/05/29 职场文书
小学生运动会报道稿
2014/09/12 职场文书
学位证书委托书
2014/09/30 职场文书