JQuery插件iScroll完结下拉刷新,滚动翻页特效

JQuery插件:iScroll

$(function(){ 
    //置顶按钮显示/隐藏实现 
    $(window).scroll(function(){ 
      var w_height = $(window).height();//浏览器高度 
      var scroll_top = $(document).scrollTop();//滚动条到顶部的垂直高度 
      if(scroll_top > w_height){ 
          $("#goto-top").fadeIn(500); 
        }else{ 
          $("#goto-top").fadeOut(500); 
      } 
    }); 
  //置顶 
  $("#goto-top").click(function(e){ 
      e.preventDefault(); 
      $(document.documentElement).animate({ 
        scrollTop: 0 
        },200); 
      //支持chrome 
      $(document.body).animate({ 
        scrollTop: 0 
        },200); 
    }); 
  }) 
</script> 
<style type="text/css"> 
  #goto-top { 
    display:none; 
    position:fixed; 
    width:38px; 
    height:36px; 
    background:url(images/goto-top.png) no-repeat 0 0; 
    bottom:40px; 
    right:40px; 
    -webkit-transition:all 0.2s; 
    -moz-transition:all 0.2s; 
    -o-transition:all 0.2s; 
    transition:all 0.2s; 
    z-index:9999; 
  } 
  #goto-top:hover { 
    background:url(images/goto-top.png) no-repeat 0 -36px; 
  } 
</style> 
</head>

设置页面加载时滚动条自动滚到底的措施:

页面布局:

你或者感兴趣的文章:

  • jQuery滚动监听完毕商号楼梯式导航功用
  • jQuery达成可包容IE6的轮转监听功效
  • 遗闻jQuery完毕手风琴菜单、层级菜单、置顶菜单、无缝滚动作效果应
  • JQuery插件iScroll完成下拉刷新,滚动翻页特效
  • js/jquery获取浏览器窗口可视区域中度和幅度以及滚动条中度达成代码
  • jQuery
    scroll事件完成监督滚动条分页示例
  • jQuery创制平滑的页面滚动(顶上部分或底层)
  • js,jquery滚动/跳转页面到钦点地点的贯彻思路
  • jquery无缝向上滚动达成代码
  • JS
    JQUEPRADOY完成滚动条自动滚到底的主意
  • jQuery完毕的监听导航滚动置顶状态功用示例

jQuery:

<div id="wrapper">
  <div id="scroller">
   <div id="pullDown">
    下拉刷新...
   </div>
   <ul id="thelist">
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
   </ul>
   <div id="pullUp">
    上拉加载更多...
   </div>
  </div>

复制代码 代码如下:

翻页,是透过ajax乞求,把页码传入一般管理程序,在一般管理程序中获得分页后的数量再次回到json数组对象。

$(function(){
  var h = $(document).height()-$(window).height();
  $(document).scrollTop(h);
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注