选择所在城市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的打赏，我们会更加努力！    如果您想成为作者，请点我