回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器

所属分类:UI,其他-滚动,移动

 24280  90  查看评论 (2)
回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器 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)

相关插件-滚动,移动

可制作炫酷页面滚动效果的jQuery事件插件

jquery.scrollex.js是一款可制作炫酷页面滚动效果的jQuery事件插件。该插件中包含有一组预置的jQuery事件,通过这些事件,可以在页面滚动时为指定元素制作相应的动画效果。
  滚动
 7464  65

jquer滚动隐藏显示顶部导航栏

引导固定导航栏 页面向下滚动时隐藏导航栏,向上显示,以及滚动到低部时显示顶部导航。
  滚动
 16715  44

jQuery单页滚动插件pagePiling.js

pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的,旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。
  滚动
 25029  126

jQuery 3D立方体切换过渡插件cubeTransition.js

cubeTransition.js是一款超酷3D立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。
  滚动
 3977  30

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    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
取消回复
    PROMULGATOR

    hacker

    火星