选择所在城市html按字母,移动端根据字母定位到指定的城市【原创】

效果图如下：

点击效果图左侧的文字定位到指定字母下面的城市。

方法一：根据锚点定位

用锚点定位比较简单，锚点定位可以根据id也可以根据name值，我用的是根据id定位，原理上跟跳路由一样，只不过是在一个页面内跳到指定的位置，代码截图如下

这张图主要是给城市上面的字母所在的div定义一个id；

然后把左侧的字母设置一个a标签，href属性设成上张图对应的id，这样点击的时候就可以跳到对应的位置。

方法二：用js实现同样的效果

用js没有第一种方法方便，我也把自己写的js简单的说下。

原理就是根据城市上面的字母和右侧需要点击的字母，判断如果两者的值相等，通过控制滚动scrollTop，就可以达到目前。

代码如下：

js很少需要注意的就是两个this，第一个this是点击右侧的字母所对应的值，第二个this是遍历过程中，城市上面对应的字母，然后判断这两个值是不是相等，如果是就把offset().top的值赋给scrollTop中，最后那个animate是为了控制页面滚动的速度，这样使用感觉会好的，这也是用锚点定位没有的效果。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/19815.html

微信打赏

支付宝打赏

感谢您对作者Dave的打赏，我们会更加努力！如果您想成为作者，请点我

选择所在城市html按字母,移动端根据字母定位到指定的城市【原创】相关推荐

java发现城市_java实现简单注册选择所在城市
本文实例为大家分享了java实现简单注册选择所在城市的全部代码,供大家参考,具体内容如下 1.activity_main.xml xmlns:tools="http://schemas.an ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
uni-app text、文本、selectable、自定义长按选择菜单、修改系统菜单键(双端)
uni-app text.文本.selectable.自定义长按选择菜单.修改系统菜单键(双端):https://ext.dcloud.net.cn/plugin?id=10586 <templ ...
js实现PC端根据IP定位当前城市地理位置
js实现PC端根据IP定位当前城市地理位置. <script src="http://pv.sohu.com/cityjson?ie=utf-8"></scrip ...
学考计算机删除键是什么字母,计算机打印健字母是什么
键盘上的键可以根据功能划分为几个组: 键入(字母数字)键.这些键包括与传统打字机上相同的字母.数字.标点符号和符号键. 控制键.这些键可单独使用或者与其他键组合使用来执行某些操作.最常用的控制键是 C ...
LeetCode简单题之寻找比目标字母大的最小字母
题目给你一个排序后的字符列表 letters ,列表中只包含小写英文字母.另给出一个目标字母 target,请你寻找在这一有序列表里比目标字母大的最小字母. 在比较时,字母是依序循环出现的.举个例子 ...
C语言试题八十二之输入小写字母，把小写字母转换成大写字母。
1.题目输入小写字母,把小写字母转换成大写字母. 2 .温馨提示 C语言试题汇总里可用于计算机二级C语言笔试.机试.研究生复试中C程序设计科目.帮助C语言学者打好程序基础.C语言基础,锻炼您的逻辑思 ...
智慧城市每年商机超2万亿美元；中德嘉宾共话智慧城市建设 | 智慧城市周报
美国亚利桑那州立大学获得300万美元建设智慧城市教育项目雷锋网(公众号:雷锋网)消息,随着我们身边5G速度和自动驾驶汽车的发展,我们的城市变得比以往任何时候都更加智能,并且在国家科学基金会的帮助下, ...
mysql中生成字符串对应的英文字母（拼音首字母）
mysql中生成字符串对应的英文字母(拼音首字母)的存储过程,触发器和函数 1.规则 1.1.输入字符串长度255(可变),输出字符串10(可变) 1.2.对于全英文字母或数字,输出空格后的首字符,均 ...
oracle如何判断数字中有字母,SQL 判断含有字母和数字的字符串
SQL 判断含有字母和数字的字符串,你想从一个表里筛选出部分行数据,筛选条件是你感兴趣的那个列只包含字母和数字字符,考虑下面的视图 V(SQL Server 用户需要把字符串连接操作符||替换为 +) ...

选择所在城市html按字母,移动端根据字母定位到指定的城市【原创】

选择所在城市html按字母,移动端根据字母定位到指定的城市【原创】相关推荐

最新文章

热门文章