`
xllily
  • 浏览: 119758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

“返回顶部代码”滑动效果 jQuery超级简单实用写法

阅读更多

东西很简单,还是利用jQuery,直接代码:

 

html代码,一般放在footer.php里:

 

<a href="#" id="top"> 返 回 顶 部 </a>

CSS代码,使用了fixed让对象固定于浏览器窗口:

 

#top{position:fixed;bottom:0;right:10px;}

jQuery代码,注意正常使用的几个条件:

 

$('#top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);return false;});

OK,此文完!

 

那个 800 是调节移动速度的 也就是毫秒 你可以自动调节

这个jqu 真是变态呢 一句代码 就可以替换js 10行代码  越来越爱了 !!!

2
8
分享到:
评论

相关推荐

    jQuery右下角浮动层火箭动画返回顶部效果代码.rar

    jQuery右下角浮动层火箭动画返回顶部效果代码.rar jQuery右下角浮动层火箭动画返回顶部效果代码.rar jQuery右下角浮动层火箭动画返回顶部效果代码.rar jQuery右下角浮动层火箭动画返回顶部效果代码.rar jQuery右下角...

    简单实用jQuery返回顶部代码.zip

    总的来说,这个“简单实用jQuery返回顶部代码”提供了良好的用户体验设计,利用jQuery的简洁语法实现了动态效果,同时兼顾了功能性和美观性。开发者可以根据自己的需求调整代码,适应不同的页面设计风格和交互体验。...

    jQuery绿色QQ在线客服返回顶部代码.zip

    总结来说,这个项目展示了如何利用jQuery实现一个实用且美观的在线客服系统和返回顶部功能,它不仅可以提升网站的互动性,还能优化用户体验。通过理解并实践这些知识点,开发者可以更好地掌握jQuery在实际项目中的...

    jquery返回顶部代码

    下面是一个简单的jQuery返回顶部的实现代码示例: ```html &lt;!DOCTYPE html&gt; 返回顶部示例 #back-to-top { position: fixed; bottom: 20px; right: 30px; width: 50px; height: 50px; background-...

    jQuery右侧边栏二维码QQ客服返回顶部代码

    在这个特定的项目中,“jQuery右侧边栏二维码QQ客服返回顶部代码”是一个实现了一些常见网站功能的代码片段,包括: 1. **jQuery库的引入**:首先,你需要在网页中引入jQuery库,这通常是通过在HTML文档的`&lt;head&gt;`...

    jQuery平滑返回顶部代码.zip

    本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法,利用了广泛使用的JavaScript库jQuery。接下来,我们将深入探讨jQuery平滑返回顶部代码的工作原理、实现方式以及如何在实际项目中应用。 首先,...

    jQuery右端悬浮带返回顶部代码

    jQuery右端悬浮带返回顶部代码是一种常见的网页交互设计,它通常出现在页面滚动时,一个固定在屏幕右侧的小图标(如箭头或按钮)会显示出来,用户点击后页面会迅速滚动回顶部。这个功能可以提升用户体验,特别是对于...

    用jQuery实现返回顶部滑动跳转效果

    本教程将详细讲解如何使用jQuery库来实现这种平滑的返回顶部的滑动跳转效果。 首先,jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作,事件处理,动画以及Ajax交互。在这个效果中,jQuery的动画功能...

    jQuery可变透明度返回顶部代码

    **jQuery可变透明度返回顶部代码详解** 在网页设计中,提供一个返回顶部的功能是非常常见的需求,这可以方便用户在浏览长页面时快速回到页面顶部。"jQuery可变透明度返回顶部代码"就是一个实现此类功能的JavaScript...

    jQuery网站右侧悬浮带二维码返回顶部代码.zip

    "jQuery网站右侧悬浮带二维码返回顶部代码"是一个实现这种功能的实例,它结合了jQuery库和一些CSS样式,为用户提供了一个既美观又实用的解决方案。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历...

    jQuery带底部返回顶部按钮代码.zip

    jQuery带底部返回顶部按钮代码是一款带有微信二维码的底部固定层返回顶部代码。

    jquery实现返回顶部源代码

    总的来说,通过jQuery实现“返回顶部”功能是一个简单但实用的技巧,可以显著提升用户体验。结合HTML和CSS的自定义能力,你可以创建出符合自己网站风格的返回顶部按钮。希望这段源代码和解析能对你有所帮助,也鼓励...

    图翼网侧边jQuery返回顶部代码.zip

    本资源"图翼网侧边jQuery返回顶部代码.zip"提供了一个实用的jQuery特效,适用于网站的侧边栏,增强用户体验。下面我们将详细探讨这个特效涉及的jQuery知识点以及实现原理。 首先,jQuery的事件处理是关键部分。在这...

    jquery右侧导航菜单悬浮代码,带返回顶部功能

    本文将详细介绍使用jQuery实现的右侧悬浮导航菜单以及返回顶部的功能。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互,使得开发者能够更高效地创建动态网页。 首先,我们...

    jQuery图片左右滚动效果代码.zip

    总结来说,"jQuery图片左右滚动效果代码"是通过jQuery的DOM操作、事件处理和动画制作等功能,结合自动轮播和左右箭头交互,实现了一种动态的图片展示效果。这样的代码对于提升网站的视觉吸引力和用户体验有着重要...

    实现返回顶部和底部的Jquery特效

    JQuery作为一个强大的JavaScript库,提供了简单易用的API来实现这样的效果。本文将详细探讨如何使用JQuery实现返回顶部和底部的特效。 首先,我们需要在HTML文档中添加必要的结构。为了实现返回顶部的按钮,可以在...

    jQuery仿威锋商城网站右侧悬浮层返回顶部代码

    【jQuery仿威锋商城网站右侧悬浮层返回顶部代码】是一个基于JavaScript库jQuery实现的功能,它主要目的是为了在网页滚动时提供一个便捷的方式让用户能够快速返回页面顶部。这个功能常见于许多电商网站和内容丰富的...

Global site tag (gtag.js) - Google Analytics