js导航定位指定位置
来源:互联网 发布:重生之大英雄 知乎 编辑:程序博客网 时间:2024/06/09 18:53
在项目中遇到一个导航点击,定位到具体位置的上,类似这种效果
通常按照我之前的做法是在左侧的点击事件里添加html锚点,右侧的A B位置ID设置为和左侧href锚点值一样即可。但是这样做有一个缺陷,就是点击左侧导航的时候,浏览器会有滚动效果,而且浏览器url上会加上锚点的信息,算是个缺陷吧。
正好看到了项目中之前的实现,看到了另一种实现方式,按照这个思路,自己修改了一下,果然比锚点的方式感觉更干净一点。而且自己学到了js的一个方法,为了巩固一下,便记录下来。具体实现代码如下:
//左侧导航点击事件$('#Letter').on("click", "a", function() { //获取值相同右侧下拉列表中元素 var currentGroup = $('#' + $(this).attr('data')); //获取元素距离父级元素顶端的高度 var postiontop = currentGroup[0].offsetTop; //将滚动条的位置设置到这个高度的位置(即当前可视区域显示需要定位的元素) $('#dd_Make').scrollTop(postiontop);});
实现效果如下:
点击左侧导航,右侧下拉可直接定位到指定位置。
0 0
- js导航定位指定位置
- js定位光标到输入框指定位置
- RecyclerView定位到指定位置
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- 页面load时,定位到指定位置
- 高德地图指定位置定位
- Listview如何定位到指定位置
- swiper 定位到指定页面或位置
- js在指定位置输出
- js指定滚动条位置
- js 跳转至指定位置
- Android ListView 滑动到指定item 定位 指定位置
- 内容定位导航js(移动端)
- js获取控件坐标以及位置定位
- JS定位光标在textarea中的位置
- js中的定位固定层的位置
- js中的定位固定层的位置
- js定位到第一个错误位置
- Pattern matcher showMethods
- 图形类的派生与继承(求面积与求周长)
- TensorFlow 初学者在使用过程中可能遇到的问题及解决办法
- 二叉树的经典面试题总结
- Android对接支付宝移动支付始终无法成功调用H5PayActivity
- js导航定位指定位置
- thrift学习笔记(一) thrift简介及第一个helloword程序
- Android Studio 安装Genymotion模拟器
- web.字符串.特殊字符处理
- 一个奇怪的django报错
- SSD(Single Shot MultiBox Detector)的solver参数 test_initialization的说明塈解决训练时一直停在Iteration 0的问题
- SDWebImage-SDWebImageDownloader下载图片
- Emoji 表情转义止于前端
- [MSSQL]禁止删库