Chinaunix首页 | 论坛 | 博客

甜心183的ChinaUnix博客

首页　| 　博文目录　| 　关于我

甜心183

  • 博客访问： 113758
  • 博文数量： 40
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 423
  • 用 户 组： 普通用户
  • 注册时间： 2013-01-15 11:55
文章分类

全部博文（40）

文章存档

2016年（36）

2015年（2）

2013年（2）

我的朋友
最近访客
推荐博文
jquey，zepto点击定位到相应div

分类： JavaScript

2016-07-08 12:03:13

锚点能解决的问题都是小问题，但是往往有些定位问题是锚点不能解决的，先说说锚点的缺点，在定位的锚点底部内容不够的情况下，定位的位置是不能移动到页面顶部的，下边分别用jquery和zepto两种办法解决
1.jquery解决，直接上一个demo

点击(此处)折叠或打开

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jquery实现平滑滚动到顶部、底部、或者指定地方</title>
  6. <script src=""></script>
  7.  
  8. <style>
  9.     .box{
  10.         margin:30px auto;
  11.         width:800px;
  12.         height:230px;
  13.         background:#060;
  14.         color:white;
  15.         font-size:20px;}
  16.          
  17.     .readNav{
  18.         width:90px;
  19.         height:215px;
  20.         text-align:center;
  21.         position:fixed;
  22.         right:30px;
  23.         bottom:320px;
  24.         padding:5px;
  25.         border:1px solid gray;}
  26.     .readNav p{
  27.         cursor:pointer;}
  28.     .readNav p:hover{
  29.         font-size:large;}
  30.      
  31.          
  32.     .goTo{
  33.         position:fixed; /*当position设置为fixed的时候，元素的位置是相对浏览器窗口的而不是其父容器*/
  34.         right:30px;
  35.         bottom:30px;}
  36.     .toTop,.toBottom{
  37.         width:44px;
  38.         word-break:break-all;
  39.         border:1px solid gray;
  40.         border-radius:40px;
  41.         cursor:pointer;
  42.         border:outset;}
  43.          
  44. </style>
  45.  
  46. </head>
  47.  
  48. <body>
  49.  
  50.     <div class="box top">
  51.     <h3>第一部分</h3>
  52.     “停一停，”他说道，“你应该先把木板头子锯掉再钉上去。”于是，贾金斯便四处去找锯子。找来锯子之后，还没有锯到两三下又撒手了。“这把锯子，”他说，“需得磨快些。”于是他又去找锉刀。接着又发现在使用锉刀之前，必须先在锉刀上安一个顺手的手柄，为了给锉刀安手柄，他又去灌木丛中寻找小树，要砍下小树干，他又发现这得先磨快斧头。当然，要磨快斧头，他不得不先将磨石固定好，这样磨起来才得心应手；可这又免不了要制作几根支撑磨石的木条。为了把这事儿办得体面些，贾金斯决定做一张木匠用的长凳；可这没有一套齐全的工具是不可能的事。于是，贾金斯到村里去找他所需要的工具，然而这一走，就再也不见他回来了。
  53.     </div>
  54.      
  55.     <div class="box">
  56.     <h3>第二部分</h3>
  57.         自从第一桩事儿以后，我逐渐和贾金斯混熟了，十分了解他无论学什么都是半途而废。曾有一段时间，他废寝忘食地攻读法语，但很快便发现要真正掌握法语，必须首先对古法语有透彻的了解，然而实践表明：没有对拉丁语的全面掌握和理解，要想学好法语是绝不可能的。贾金斯进而发现，掌握拉丁语的唯一途径是学习梵文，因为梵文显然是拉丁语的基础。因此贾金斯便一头扑进梵文的学习之中，直到他发现，要正确地理解梵语，非学古伊朗语不可，因为它是语言的根本。然而，这种语言却早已销声匿迹了。
  58.     </div>
  59.      
  60.     <div class="box">
  61.     <h3>第三部分</h3>
  62.         这样，贾金斯不得不一切从头开始。无可否认，他的确在自然科学上取得过一些成绩。他研究过物理学，很快从对力的研究追溯到分子，又从分子到原子，再从原子到电子，当他的全部研究已扩展到无限的空间领域时，他却仍然在那里追根溯源。
  63.     </div>
  64.      
  65.     <div class="box">
  66.     <h3>第四部分</h3>
  67.         但这无关紧要。他有的是钱，可以拿出10万美元的资本直接开厂兴业。起初，他将这笔钱投资办一家煤气厂，可他发现造煤气所需的煤炭价钱昂贵，这使他大为亏本。于是，他以9万美元的售价把煤气厂转让出去，开办起煤矿来。可这又不走运，因为采矿机械的耗资大得吓人。因此，贾金斯把在矿里拥有的股份变卖成8万美金，转入了煤矿机器制造业。这样，他本来可以赚些钱的，偏偏用作工厂动力的是煤气，耗费巨大。于是贾金斯又以7万元的价卖掉他的制造业。从那以后，他便象一个倒行的滑冰者，在有关的各种工业部门中滑进滑出，没完没了。
  68.     </div>
  69.      
  70.     <div class="box">
  71.     <h3>第五部分</h3>
  72.         为此，他开始在津神品德方面陶冶自己。他去一所星期日学校教了一个半月的课，这时他意识到，假如一个人不打算首先系统地学习巴勒斯坦历史，休想在教书这样神圣的职业中干出一番事业。他还认为，当一个人对以色列的历史还只是一知半解，想去追逐一个女人，那真是无赖之徒。因此，贾金斯自动逃遁了。当他认为问心无愧、无妨启齿求婚之日，整整将近两年的光陰已经流逝了。这时，那位姑娘早已嫁给一个愚蠢的家伙，脚上穿着漆皮长靴。
  73.     </div>
  74.      
  75.     <div class="box bottom">
  76.     <h3>第六部分</h3>
  77.         这一次他如痴如醉地爱上了一位迷人的、有5个妹妹的姑娘。无论哪位名副其实的男子汉，准会一见钟情地爱上象她这样的姑娘。既然如此，贾金斯一定会向姑娘求婚的。可是当他上姑娘家时，遇见的却是她家的二妹。当然这位妹妹更年轻，这样贾金斯便喜欢上了二妹。可是一天晚上，当他去姑娘家拜访时，开门的是一位更小的妹妹。这一来，贾金斯只好倒回去逐个地将众姐妹衡量了一番，到最后一个也没上手。”“也许贾金斯从未结成婚倒是件好事，因为贾金斯的情形每况愈下，越来越穷，结了婚会陷入更困难的境地。你知道，他卖掉了最后一项营生的最后一份股份后，便用这笔钱买了一份逐年支取的终生年金。可是这样一来，支取的金额将会逐年减少，因此他要是活的时间长了，早晚得饿死。
  78.     </div>
  79.      
  80.     <!--回顶部或者底部按钮-->
  81.     <div class="goTo">
  82.         <p><button class="toTop">回到顶部</button></p>
  83.         <p><button class="toBottom">回到底部</button></p>
  84.     </div>
  85.      
  86.      
  87.     <!--右侧内容跳转导航-->
  88.     <div class="readNav">
  89.         <p>第一部分</p>
  90.         <p>第二部分</p>
  91.         <p>第三部分</p>
  92.         <p>第四部分</p>
  93.         <p>第五部分</p>
  94.         <p>第六部分</p>
  95.     </div>
  96.      
  97. <script>
  98.     $(function(){
  99.         <!--回到顶部-->
  100.         $(".toTop").click(function(){
  101.             <!--此处加入finish防止多次点击回顶部或者回底部多次触发动画的bug也可以使用stop()来替换finish()-->
  102.             $("html,body").finish().animate({"scrollTop":"0px"},900);
  103.         });
  104.          
  105.         <!--回到底部-->
  106.         $(".toBottom").click(function(){
  107.             $("html,body").finish().animate({"scrollTop":$(".bottom").offset().top},900);
  108.         });
  109.          
  110.         <!--跳转至相应的位置-->
  111.         $(".readNav p").click(function(){
  112.             var index=$(".readNav p").index(this);
  113.             console.log(index)
  114.             <!--根据索引匹配找到导航到应的内容-->
  115.             $("html,body").finish().animate({"scrollTop":$(".box").eq(index).offset().top},400);
  116.         });
  117.     });
  118. </script>
  119.  
  120. </body>
  121. </html>
2.zepto，zepto的animate的没有反应，用下边代码

点击(此处)折叠或打开

  1. $.fn.scrollTo =function(options){
  2.         var defaults = {
  3.             toT : 0, //滚动目标位置
  4.             durTime : 500, //过渡动画时间
  5.             delay : 30, //定时器时间
  6.             callback:null //回调函数
  7.         };
  8.         var opts = $.extend(defaults,options),
  9.             timer = null,
  10.             _this = this,
  11.             curTop = _this.scrollTop(),//滚动条当前的位置
  12.             subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值
  13.             index = 0,
  14.             dur = Math.round(opts.durTime / opts.delay),
  15.             smoothScroll = function(t){
  16.                 index++;
  17.                 var per = Math.round(subTop/dur);
  18.                 if(index >= dur){
  19.                     _this.scrollTop(t);
  20.                     window.clearInterval(timer);
  21.                     if(opts.callback && typeof opts.callback == 'function'){
  22.                         opts.callback();
  23.                     }
  24.                     return;
  25.                 }else{
  26.                     _this.scrollTop(curTop + index*per);
  27.                 }
  28.             };
  29.         timer = window.setInterval(function(){
  30.             smoothScroll(opts.toT);
  31.         }, opts.delay);
  32.         return _this;
  33.     };
  34. var dealTop = $(".dyna-title").offset().top;
  35.       $("html,body").scrollTo({toT:dealTop})
阅读(1949) | 评论(0) | 转发(0) |
0

上一篇：jquery滑动加载分页

下一篇：jquery上传图片功能

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6