jQuery类级别插件--返回顶部,底部,去到任何部位

先引入js:
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="towhere.js" ></script>

假设页面:

    <body>
        <a href="javascript:;" id="to-bottom">去到底部</a>
        <a href="javascript:;" id="to-top">返回顶部</a>
        <div id="to-where1">去到500处</div>
        <div id="to-where2">去到1000处</div>
    </body>

使用方法:

    $(function(){
        $(‘#to-bottom‘).click(function(){
            $.toBottom();
        });
        $(‘#to-top‘).click(function(){
            $.toTop();
        });
        $(‘#to-where1‘).click(function(){
            $.toWhere(500);
        });
        $(‘#to-where2‘).click(function(){
            $.toWhere(1000);
        });

        /*

         $.toBottom();        去向底部,$.toBottom(0.1)--[0.1-可选参数-运动速度],默认0.3
         $.toTop();           返回顶部,调整同上
         $.toWhere();         到任何处,$.toWhere(500,0.1)--[500-必填到达何处,0.1--可选速度],默认0.3

         */
    });

插件下载:

http://pan.baidu.com/share/link?shareid=2575574326&uk=3945321701

时间: 2024-12-14 19:30:46

jQuery类级别插件--返回顶部,底部,去到任何部位的相关文章

返回顶部/底部3

<!DOCTYPE html> <html lang="en"> <head> <title>返回顶部/底部</title> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"

【转】用jquery编写动态的返回顶部特效

jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(//定义返

jQuery 一句代码返回顶部

兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="position:fixed;bottom:20px;right:20px;">Back to top</a> <script> $('.top').click(function (e) { $('html, body').animate({scrollTop: 0}, 8

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

挺个性的jQuery返回底部、返回顶部特效

运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

jquery返回顶部 滑到底部

<div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍

仿新浪微博返回顶部的js实现(jQuery/MooTools)

一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示,且返回顶部的效果是平滑动画效果.本文的实现就是类似于新浪微博的这种效果.//zxx:新浪微博今天启用新域名weibo.com了 二.jQuery下的返回顶部功能 您可以狠狠地点击这里:jQuery下的返回顶部demo 可以看到,如果页面有滚动高度,

返回顶部和底部(动画)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

一句jQuery代码返回顶部

效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/j