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中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
Vue scoped及deep使用方法解析
Aug 01 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python的动态重新封装的教程
2015/04/11 Python
python实时监控cpu小工具
2018/06/21 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
餐饮总经理岗位职责
2014/03/07 职场文书
精神文明单位申报材料
2014/05/02 职场文书
学术会议邀请函
2015/01/30 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android