`

返回顶部效果(转)

阅读更多
$(function(){
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            $('#toTop').fadeIn();
        } else {
            $('#toTop').fadeOut();
        }
    });
    $("#toTop").click(function(){
        $("html,body").animate({scrollTop:0},"slow");
        return false;
    });    
});

转自http://aijuans.iteye.com/blog/1884591
分享到:
评论

相关推荐

    返回顶部插件

    返回顶部插件的实现主要基于JavaScript,特别是jQuery库,因为jQuery提供了一系列便捷的DOM操作和动画效果。此外,CSS3也被广泛应用来实现插件的样式和动画效果,例如平滑过渡和渐变效果,使得返回过程更加流畅自然...

    html5 svg一飞冲天火箭动画返回顶部特效

    在这个特效中,可能有一个“返回顶部”的按钮,当用户滚动页面到一定位置时,火箭动画会触发,火箭升至页面顶部,同时也将页面滚动回顶部。这可以通过监听滚动事件、计算滚动位置,并触发相应的动画和页面滚动操作来...

    CSS3返回顶部在线客服右侧悬浮菜单.zipzip

    【CSS3返回顶部】 CSS3是层叠样式表(Cascading Style Sheets)的第三版,相较于CSS2,它引入了许多新的特性和功能,极大地增强了网页设计的灵活性和表现力。在本案例中,"返回顶部"按钮是通过CSS3实现的一个常见...

    jquery返回顶部 网页右下角返回顶部或者底部不同风格特效.zip

    这个压缩包文件"jquery返回顶部 网页右下角返回顶部或者底部不同风格特效.zip"显然是提供了一组使用jQuery实现的返回顶部效果,适用于网页右下角或底部的位置,旨在为用户提供多种风格选择,提升网站的交互性和美观...

    顶部导航(支持左右滑,下拉刷新,上拉加载更多,返回顶部,加载动画).zip

    在“顶部导航(支持左右滑,下拉刷新,上拉加载更多,返回顶部,加载动画)”这个项目中,我们可以深入探讨以下几个关键知识点: 1. **左右滑动切换**:这是顶部导航的一项重要功能,允许用户通过在屏幕左右滑动来...

    带返回顶部的常用悬浮QQ、msn在线客服JS代码

    "带返回顶部"和"悬浮QQ、msn在线客服JS代码"是两种常见的网页增强功能,它们能够便捷地为用户提供帮助和支持。下面将详细解释这两个功能的实现原理和应用。 首先,"返回顶部"功能是一种常见的网页设计元素,它允许...

    win8扁平风格网站侧边栏在线客服返回顶部.zip

    在这个项目中,jQuery被用来控制侧边栏的显示、隐藏、滚动效果和返回顶部功能,通过编写少量的代码就能实现复杂的功能。 3. **在线客服系统**:在线客服系统是网站提供实时客户服务的工具,通常包括聊天窗口、消息...

    返回顶部插件jquery.gototop.zip

    返回顶部插件jQuery.gototop是一款非常实用的网页交互元素,主要目的是为用户提供便捷的导航功能,让他们在浏览长页面时能轻松返回页面顶部。这个插件是基于JavaScript库jQuery构建的,jQuery是一个轻量级、高性能的...

    jQuery超出屏幕高度显示返回顶部.zip

    最后,我们还可以使用CSS3的动画效果,让返回顶部按钮的出现和消失更具有视觉吸引力。例如,可以添加一些过渡效果: ```css #back-to-top { transition: opacity 0.3s ease-in-out; /* 其他样式 */ } #back-to-...

    滑动返回顶部插件 for Discuz! ALL GBK UTF8 BIG5.rar

    滑动返回顶部插件是为Discuz!论坛系统设计的一款增强用户体验的小工具,适用于GBK、UTF8和BIG5三种字符编码。这个插件基于JavaScript库jQuery,实现了在用户滚动页面时,一个返回顶部的按钮会自动出现,点击后页面会...

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    JavaScript实现跟随滚动条漂浮的返回顶部按钮效果知识点解析: 一、背景介绍: 在网页设计中,当页面内容很长,超出了用户的显示区域时,为了提升用户体验,常常会设计一个返回页面顶部的按钮。随着用户滚动页面,...

    CSS3右侧悬浮二维码返回顶部特效代码

    - `transition`属性可以实现元素状态改变时的平滑过渡效果,而`animation`则可以创建更复杂的动效,如按钮被点击后返回顶部的动画效果。 7. **二维码生成**: - 生成二维码通常需要借助第三方库或在线工具,将其...

    小火箭回到顶部demo页面

    3. **事件监听与处理**:绑定点击事件到火箭图标,当用户点击时触发返回顶部的动画。可以使用`addEventListener`或jQuery的`click`方法,然后调用`window.scrollTo`方法,配合定时器实现平滑滚动效果。 4. **布局与...

    jQuery火箭返回顶部动画特效特效代码

    今天我们要探讨的是一个创新且实用的交互式效果——jQuery火箭返回顶部动画特效。这个特效将为你的网站添加一个引人注目的元素,当用户滚动到页面底部时,一个小巧的火箭图标会从右下角飞速上升,引导用户轻松返回...

    前端小项目集合.zip

    9.返回顶部匀速和缓冲。 10.页面内搜索。 11.电商图片放大镜。 12.未实现。 13.圆形时钟。 14.五星好评。 15.碰撞检测。 16.遮罩层动画。 17.吸附效果。 18.旋转木马效果。 19.万年历。 20.旋转立方体。 21.随机抽奖...

    vc 6.0实现的图片翻转特效.rar

    水平翻转相当于将图片的右侧像素复制到左侧,而垂直翻转则将底部像素复制到顶部。这可以通过创建一个临时的设备上下文(Device Context, DC),并使用 StretchBlt 或 BitBlt 函数来实现。 StretchBlt 是一个非常...

    仿苹果效果导航

    此外,苹果导航还有一个特点是顶部的navigationBar,它包含了返回按钮、标题以及可能的其他操作按钮。在开发时,可以使用苹果提供的SwiftUI或Objective-C/Swift语言来构建iOS的navigationBar,而在Web端,可以使用...

    JavaScript回到顶部功能实现

    在网页设计中,"回到顶部"功能是一个常见且实用的元素,它允许用户快速返回页面的顶部,提高用户体验。本文将详细介绍如何使用JavaScript实现这一功能。 首先,我们可以在HTML中创建一个"回到顶部"的按钮,通常将其...

    用 ObjectAnimator 仿微信表情雨动画效果

    5. **循环动画**:如果希望表情在到达屏幕底部后再次返回顶部,可以设置`ObjectAnimator`的`repeatCount`为无限大,并设置`repeatMode`为“restart”,使其在动画结束后重新开始。 6. **触发关键词匹配**:根据业务...

Global site tag (gtag.js) - Google Analytics