实现功能:点击右侧字母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,实现锚点跳转的更多相关文章

  1. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  2. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  3. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  4. 使用JS模拟锚点跳转

    A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...

  5. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  6. 微信小程序 scroll-view 实现锚点跳转

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...

  7. jQuery实现锚点跳转(就一行代码)

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...

  8. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  9. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

随机推荐

  1. wcf iis host 打开exe失败 不能显示界面

    最近谷歌没法用了,我的freegate经常性的崩溃 无奈之下,用了必应,貌似也不错 http://stackoverflow.com/questions/8414514/iis7-does-not-s ...

  2. hdu4649Professor Tian

    http://acm.hdu.edu.cn/showproblem.php?pid=4649 枚举当前状态是0或者是1的概率 其实就枚举1的概率 最后概率乘这个数 位运算用得不熟  老出错 #incl ...

  3. NOI2010超级钢琴 2

    2006: [NOI2010]超级钢琴 Time Limit: 20 Sec  Memory Limit: 552 MBSubmit: 1296  Solved: 606[Submit][Status ...

  4. 实现简单的WebPart

    转:http://www.cnblogs.com/gaoweipeng/archive/2009/10/26/1589269.html 在前面的文章中,我们讲解了很多基础的内容,主要包括安装配置.简单 ...

  5. 对ASP.NET程序员非常有用的85个工具

    介绍 这篇文章列出了针对 ASP.NET 开发人员的有用工具. 工具 1. Visual Studio Visual Studio Productivity Power tool:Visual Stu ...

  6. Spring概述--1

    1.1.1  Spring是什么 Spring是一个开源的轻量级Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应用框架,其目的是用于简化企业级应用程序开发.应用程序是由 ...

  7. [Rosa]Android ListView 适配器原理及优化(转)

    ListView的Adapter的作用如下图所示:   Adapter的作用就是ListView界面与数据之间的桥梁,当列表里的每一项显示到页面时,都会调用Adapter的getView方法返回一个V ...

  8. OpenGL立方体在世界坐标系中_缩放_旋转_平移_顶点片源着色器_光照作用_棋盘纹理贴图

    读取bmp等图片格式中的像素还有难度,就先用这个棋盘图象素来弄了 代码打错一个就一直First-chance exception ,貌似还有一个要用q或者Q才能成功退出,不知道缺少哪句,我用窗口红叉退 ...

  9. 【JS】Intermediate4:JSON

    1. JSON(JavaScript Object Notation) A set of text formatting rules for storing and transferring data ...

  10. 2013华为校园招聘java实现(大家水个回复啊)

    package 乒乒乓乓; import java.util.Scanner; /* * * author:hansongjiang 分别求整数数组里面的奇数与偶数之和 问题描述:从标准输入里面接收一 ...