zepto的scrollTo，实现锚点跳转

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

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

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

css部分：

.address_book {

    position: relative;

    width: 100%;

    margin-top:;

    padding-top:;

}

.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:;

    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部分比较多）：

 <body class="address_book_body">

 <div class="address_book">

  <ul>

  <h4 class="address_booK_letter"><a href="javascript:;" name='A'>A</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>阿门</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='B'>B</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>贝贝</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='C'>C</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>CC</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='D'>D</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>DD</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='E'>E</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>EE</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='F'>f</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>FF</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='G'>G</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>哥哥</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='H'>H</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>HH</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='I'>I</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>II</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='W'>W</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>WW</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='Z'>Z</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>ZZ</h4>

     </div>

    </li>

     <h4 class="address_booK_letter"><a href="javascript:;" name='#'>#</a></h4>

    <li>

      <div class="list_thumb">

       <img src="data:image/user.png" alt="">

      </div>

     <div class="list_info">

      <h4>##</h4>

     </div>

    </li>

  </ul>

    <!-- 右侧字母表 -->

   <div class="search-letters">

         <a name='A'>A</a>

         <a name='B'>B</a>

         <a name='C'>C</a>

         <a name='D'>D</a>

         <a name='E'>E</a>

         <a name='F'>F</a>

         <a name='G'>G</a>

         <a name='H'>H</a>

         <a name='I'>I</a>

         <a name='W'>W</a>

         <a name='Z'>Z</a>

         <a name='#'>#</a>

   </div>

 </div>

 </body>

js部分：

js引用了zepto：

 <script src="zepto.min.js"></script>

 <script>

 (function(){

   //zepto没有scrollTo动画，所以在这里扩展了一个scrollTo函数；

   $.fn.scrollTo = function(options) {

     var defaults = {

       toT: 90, //滚动目标位置

       durTime: 500, //过渡动画时间

       delay: 30, //定时器时间

       callback: null //回调函数

     };

     var opts = $.extend({},defaults, options),

       timer = null,

       _this = this,

       curTop = _this.scrollTop(), //滚动条当前的位置

       subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值

       index = 0,

       dur = Math.round(opts.durTime / opts.delay),

       smoothScroll = function(t) {

         index++;

         var per = Math.round(subTop / dur);

         if (index >= dur) {

           _this.scrollTop(t);

           window.clearInterval(timer);

           if (opts.callback && typeof opts.callback == 'function') {

             opts.callback();

           }

           return;

         } else {

           _this.scrollTop(curTop + index * per);

         }

       };

     timer = window.setInterval(function() {

       smoothScroll(opts.toT);

     }, opts.delay);

     return _this;

   };

 $('.search-letters a').each(function(index, item) {

     $(this).click(function() {

       var att = $(this).attr('name');

       var curOffsetTop = $(".address_booK_letter a[name=" + att + "]")[0].offsetTop;

       $(".address_book_body").scrollTo({

         toT: curOffsetTop,

         durTime: 0

       });

     });

   });

 })();

 </script>

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

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

zepto的scrollTo，实现锚点跳转的更多相关文章

a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
HTML meta锚点跳转小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
各种HTML锚点跳转方式
1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...
使用JS模拟锚点跳转
A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...
jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
微信小程序 scroll-view 实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...
jQuery实现锚点跳转（就一行代码）
/* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...
html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
jQuery任意标签锚点跳转插件
// 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

随机推荐

[Hadoop源码解读]（三）MapReduce篇之Job类
下面,我们只涉及MapReduce 1,而不涉及YARN. 当我们在写MapReduce程序的时候,通常,在main函数里,我们会像下面这样做.建立一个Job对象,设置它的JobName,然后配置输入 ...
Android Root原理
概述:通过阅读本文可以深刻理解Android系统中获得Root权限的方法和原理.本文会详细介绍Root的目的,原理和代码层次的具体实现方法. Android Root介绍: 1. Root目的手机获 ...
函数page_cur_search_with_match
/****************************************************************//** Searches the right position fo ...
bzoj2208
首先有向图的题目不难想到先tarjan缩点一个强连通分量中的点的连通数显然是相等: 据说这样直接dfs就可以过了,但显然不够精益求精万一给定的是一个完全的DAG图怎么办,dfs铁定超时: 首先想, ...
Linux Kernel ‘/net/socket.c’本地信息泄露漏洞
漏洞名称: Linux Kernel ‘/net/socket.c’本地信息泄露漏洞 CNNVD编号: CNNVD-201312-037 发布时间: 2013-12-04 更新时间: 2013-12- ...
HDU 4799 LIKE vs CANDLE 树形dp
题意:有n个人,他们的关系,形成一棵有根树(0是树根,代表管理员),每个人有一个价值现在有一条微博,每个人要么点赞,要么送一个蜡烛初始一些人利用bug反转了某些人的操作(赞变蜡烛或者蜡烛变成赞 ...
vs2010的一个opencv插件
调试时,可视化mat等图像下载及使用地址: http://visualstudiogallery.msdn.microsoft.com/657956e4-8e02-4764-8022-72a0c9c ...
Flex 箭头（军标）库封装完成
封装的一个月,在这个月期间还完成的一些其它的工作:公司有规定不能公布代码,我可以讲一下大致的流程,真的很抱歉! 1.用B样条曲线画箭头的两侧的曲线,这个要注意了,不要贝塞尔曲线,因为贝塞尔曲线的算法会 ...
个性CMD设置方法(转载)
原文地址http://wenku.baidu.com/link?url=DB8X-eHwE_VGtggBmKsBimdzXeGI_6Ga90W9PmX2Px2eUqdXOnq7FhEIzsqBfTqT ...
aix i节点
文件系统与inode• UNIX文件系统有很多种类型,如HFS,NFS,JFS,CDFS.虽然文件系统种类很多,但是也有着一些相同的数据结构:超级块.inode.目录等等. • inode译成中文就是 ...

zepto的scrollTo，实现锚点跳转

zepto的scrollTo，实现锚点跳转的更多相关文章

随机推荐

热门专题