伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI,其他-滚动,移动
 36036  122  查看评论 (5)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容6
回到顶部和回到底部在当前的网页中应用时相当广泛的
为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动
那么我们就要用到强大的 Jquery 了。具体步骤如下:
1、在压面 body 中的任何地方加入一下代码<div id="scroll">           <div id="toTop" class="scrollItem">         回到顶部     </div>       <div id="toBottom" class="scrollItem">         回到底部     </div>   </div>
在head中加入css
 #scroll {position:fixed; top:300px; right:100px;} .scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}
当然你也可以定义自己的外观,可以放上一张图片来替代,关键的是保持id与js代码中一致,而且要将滚动导航层的position设置为fixed,这样当我们拖动滚动条的时候,滚动导航层才不会动。

2、引入jqeury库文件

<script type="text/javascript">// <![CDATA[         $( function () {             var speed = 1000;//自定义滚动速度             //回到顶部             $( "#toTop").click( function () {                 $( "html,body").animate({ "scrollTop" : 0 }, speed);                 });             //回到底部             var windowHeight = parseInt($("body").css("height" ));//整个页面的高度             $( "#toBottom").click(function () {                 $( "html,body").animate({ "scrollTop" : windowHeight }, speed);             });         });   // ]]></script>
在以上的JS代码中,我们可以自定义滚动速度,speed值越大,滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能,那就是滑动到指定ID的元素,语法如下。需要把scrollTop设置为 $(‘#ID’).offset().top
如果你是一名站长,你可以将上面的代码放到底部模板(一般是footer.php)中,那么你的网站的所有页面都具备了这样的功能。
下载链接(包含JS文件和demo)
相关伟德BETVICTOR-滚动,移动

视觉滚动差效果

纯css3写的滚动视差效果
  滚动
 5851  35

双向垂直上下滚动

垂直滚动伟德BETVICTOR,可切换向上或向下方向滚动。
  滚动
 16598  53

仿股市表格实时轮播

这是一款简单的不需要任何外部伟德BETVICTOR的轮播效果图
  滚动
 9683  89

jQuery简单的文字跑马灯手机1946韦德最新网站

这是一款非常简单的jQuery文字跑马灯手机1946韦德最新网站伟德BETVICTOR。该跑马灯手机1946韦德最新网站使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
  滚动
 93554  75

讨论这个项目(5)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    ?木鱼咸菜 0
    2017/12/12 19:22:15
    这个bug老厉害了 回复
    Warm 0
    2017/3/8 15:16:40
    可以 还不错 
        wish only0
        2017/8/22 17:02:14
        还不错
    回复
    minshen 1
    2016/9/21 22:09:52
    $( "html,body").stop().animate({ "scrollTop" : 0 }, speed);可以解决重复点击bug
    回复
    renshanghaohao 0
    2016/7/22 15:07:28
    如果是iframe中的按钮,该如何滚动到底部 回复
    1900。 0
    2015/7/18 14:07:49
    开心午饭_虾子鱼_jiucms_便宜汇 0
    2015/7/17 14:07:59
    jqtoto 0
    2015/7/15 0:07:58
取消回复