zepto的scrollTo，实现锚点跳转-白红宇

zepto的scrollTo，实现锚点跳转

阅读量：5122 次

发布时间：2019-06-13

本文共 3527 字，大约阅读时间需要 11 分钟。

实现功能：点击右侧字母A，实现锚点跳转功能：

有同学可能说可以直接用锚点跳转实现，是的，锚点跳转可以实现这个功能，但是有一个问题，点击跳转后，再点击返回，返回的是上次跳转的结果，具体的原理就不用多说了，大家可以自己动手试一下，现在开始我们的正式代码部分：

因为是在手机端的项目，在此案例中使用了zepto.js；

css部分：

.address_book {
       position: relative;    width: 100%;    margin-top: 0;    padding-top: 0;}.address_book li {
       position: relative;    display: -webkit-box;    background: #fff;}.address_booK_letter{
         padding: 5px 15px;    background-color: #f2f2f2;    font-size: 18px;    font-family: 'Helvetica';     color: #666;}.list_thumb {
       position: relative;    margin: 10px 10px 10px 0;    border: 1px solid #aaa;    border-radius: 5px;}.list_thumb img{
       width: 50px;    height: 50px;}.list_info{
       -webkit-box-flex: 1;    padding-right: 30px;    padding-top: 10px;    padding-bottom: 10px;  }  .list_info h4 {
       margin: 15px 0;    color: #666;  }.search-letters {
       position: fixed;    top: 20%;    right: 5px;    font-family: 'Helvetica';}.search-letters a {
       display: block;    font-size: 12px;    margin-top: 4px;    color: #333;}

html部分（因为给大家展示的是静态数据，所以html部分比较多）：

js部分：

js引用了zepto：

1  2

没有对样式进行过多调节，需要的小伙伴可以根据实际需要进行设置，效果图如下：

ps：可能还有比这个更简单的办法，大家可以互相分享一下，如果有什么问题，欢迎随时骚扰。。。。

转载于:https://www.cnblogs.com/candice-cc/p/5915865.html

你可能感兴趣的文章

用户空间与内核空间，进程上下文与中断上下文[总结]