jquery 插件页面回到顶部

引用:

jquery.scrollUp.min.js

js:

 $.scrollUp({
        scrollName: 'scrollUp', // Element ID
        topDistance: '300', // Distance from top before showing element (px)
        topSpeed: 300, // Speed back to top (ms)
        animation: 'fade', // Fade, slide, none
        animationInSpeed: 200, // Animation in speed (ms)
        animationOutSpeed: 200, // Animation out speed (ms)
        scrollText: '', // Text for element
        activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
    });

html:

  <a id="scrollUp" href="#top" title="" style="position: fixed; z-index: 2147483647;
        display: block;"></a>

css:

#scrollUp
{
    bottom: 20px;
    right: 20px;
    height: 38px;
    width: 38px;
    background: url("../../../images/top.png") no-repeat;
}

至于图片,你们自己加吧!

时间: 2024-10-09 00:37:24

jquery 插件页面回到顶部的相关文章

Jquery实现点击页面回到顶部_jquery

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid

页面回到顶部的三种实现(锚标记,js)_javascript技巧

本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 一.使用锚标记返回页面顶部 使用

jQuery实现滑动回到顶部效果代码

代码一句,但是我放在html中就不行了  代码如下 复制代码 $('html, body').animate({scrollTop: 0},500); (这里以wp为实例)直接代码: html代码,一般放在footer.php里:    代码如下 复制代码 <a href="#" id="top"> 返 回 顶 部 </a> CSS代码,使用了fixed让对象固定于浏览器窗口:    代码如下 复制代码 #top{position:fixed

jQuery实现带有动画效果的回到顶部和底部代码_jquery

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

jquery实现的动态回到顶部特效代码_jquery

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery回到顶部的代码_jquery

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果.感兴趣的朋友跟着小编一起看下实现代码吧. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top">

jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)_jquery

本文实例讲述了jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换).分享给大家供大家参考,具体如下: 这里介绍的jQuery拉动页面固定顶部显示,及自动消失效果,可能ie浏览器下有问题,不过火狐什么的都可以运行看效果,一个简单的网页特效,也是很常用的"回到顶部"效果,有兴趣的看一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/ 具体代码如下: <!DOC

javascript-js删除元素时,页面会回到顶部

问题描述 js删除元素时,页面会回到顶部 js在删除元素时:$("ul li[id="1"]").remove(); 页面老是蹦跶,就是回到顶部,有什么办法让页面不动吗? 求教 解决方案 你的连接要return false阻止默认的href="#"操作,要不就去掉href="#"或者改为href="javascript:void(0)" <a href="#" onclick=&q

【转】教你开发jQuery插件

阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用j