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

页面回到顶部连接

阅读更多
东西很简单,还是利用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;});
分享到:
评论

相关推荐

    jQuery带返回顶部右侧悬浮在线客服代码

    这个功能包括两个主要部分:一是页面滚动时显示的“返回顶部”按钮,二是右侧悬浮的在线客服聊天窗口。 1. **jQuery库**:jQuery是一个强大的JavaScript库,简化了DOM操作、事件处理、动画设计以及Ajax交互。在本...

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

    在本案例中,"返回顶部"按钮是通过CSS3实现的一个常见交互元素,它允许用户快速回到页面的顶部,提升用户体验。CSS3提供了诸如过渡(Transitions)、动画(Animations)、变换(Transforms)等特性,使得这个按钮...

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

    3. **返回顶部**功能:当用户在长页面上滚动时,此功能允许他们轻松返回页面顶部。这同样使用jQuery监听滚动事件,当用户滚动到一定距离时,显示返回顶部的按钮。点击该按钮,页面将使用`scrollTop()`方法平滑滚动回...

    jQuery实现的橙色带二维码与返回顶部的QQ在线客服源码.zip

    该资源是一个基于jQuery实现的橙色主题的在线客服系统,其中包含了二维码展示和页面滚动时显示的“返回顶部”功能。这个源码可以帮助网站开发者快速集成一个简洁且实用的在线客服模块,提升用户体验并便于与访客进行...

    js隐藏与显示回到顶部按钮及[removed]事件应用

    现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个“回到顶部”的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置。 那么,如何控制“回到顶部”...

    jQuery实现网页右侧返回顶部橙色简约在线客服代码.zip

    jQuery提供了一个简单而高效的方法来实现页面滚动时显示和隐藏返回顶部的按钮。当用户在页面底部滚动时,这个按钮会出现在屏幕右侧,点击它就能瞬间将页面滚动回顶部。这一功能通常通过监听滚动事件、计算滚动位置...

    js页面聚焦滚动在线使用连接百度翻译

    结合“在线使用连接百度翻译”的描述,我们可以推断这是一个集成了JavaScript滚动功能和百度翻译API的项目,可能用于创建一个可以自动滚动并实时翻译页面内容的网页。 在JavaScript中,实现页面聚焦滚动通常涉及...

    安卓仿微信滑动切换页面

    这个类需要重写`getCount()`方法来返回ViewPager中页面的数量,以及`getItem(int position)`方法来根据位置返回对应的Fragment实例。 4. **设置ViewPager** 在主Activity的布局文件中,添加一个ViewPager控件,并...

    客户管理管理系统jsp页面.zip

    在这个项目中,`menu.jsp`, `login.jsp`, `top.jsp`, `welcome.jsp`, `index.jsp`等文件都是JSP页面,它们分别可能对应着系统的菜单、登录、顶部导航、欢迎界面和主页等功能模块。 2. **页面结构**: - `menu.jsp`...

    使用Fragment实现顶部菜单栏

    - 创建一个`FragmentPagerAdapter`子类,重写`getItem()`和`getCount()`方法,分别返回每个Tab对应的Fragment实例和Tab总数。 5. **连接TabLayout和ViewPager** - 使用`TabLayout.setupWithViewPager(viewPager)`...

    固定页面头部和底部中间滚动

    这样的设计可以提供良好的用户体验,使用户在浏览长页面时能始终保持导航元素(如头部的菜单和底部的返回按钮)可见。 首先,我们需要理解HTML的基本结构。HTML(超文本标记语言)是网页内容的基础,通过不同的标签...

    解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验。而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置。 ...

    JSP连接access数据库 

    这需要在JSP页面的顶部添加以下代码: ```jsp *" %&gt; ``` 接下来,配置数据源。在Windows环境中,你需要在系统“控制面板”中创建一个ODBC数据源,指定Access数据库的位置和名称。这个数据源的名称将在JSP中用到。 ...

    Carpaccio空间页面滑动渐变收缩回到状态栏效果.rar

    状态栏是手机屏幕顶部显示系统信息的部分,如时间、电量、网络连接等。在Android中,开发者可以通过设置透明状态栏或者自定义状态栏颜色来改变其显示效果。 接着,我们来看滑动渐变的效果。这通常通过监听用户的...

    10-04 viewpager顶部选项卡(android studio)

    5. **连接组件**:在Activity中,初始化`TabLayout`和`ViewPager2`,并设置适配器。还要将`TabLayout`与`ViewPager2`关联起来,这样`TabLayout`的选项卡就能控制`ViewPager2`的页面切换。 ```java TabLayout ...

    数据库连接

    1. 引入JDBC驱动:在JSP页面顶部引入所需的JDBC驱动类库,通常是通过*" %&gt;来导入所有JDBC相关的类。 2. 加载驱动:使用! %&gt;`块来加载数据库驱动,例如`Class.forName("com.mysql.jdbc.Driver")`(这里以MySQL为例)...

    php连接数据库简单的代码

    2. **连接文件**:包含建立数据库连接的代码,通常在每个需要访问数据库的页面顶部包含此文件。 3. **查询文件**:用于执行SQL查询,比如插入、更新、删除或查询数据。 4. **关闭连接文件**:在所有数据库操作完成后...

    jsp页面 链接中文文件名 找不到页面

    因此,当URL中包含中文字符时,服务器无法正确识别和解析文件路径,从而返回"找不到页面"的错误。 解决这个问题的关键在于配置Tomcat服务器,使其支持能正确处理中文字符的编码,如UTF-8。在Tomcat的`server.xml`...

    解决jsp页面中文乱码问题

    - 在JSP文件顶部添加`;charset=UTF-8" language="java" %&gt;`指令,指定页面的MIME类型为text/html,字符集为UTF-8。 - 确保IDE(如Eclipse、IntelliJ IDEA)中项目的字符编码设置为UTF-8,避免在保存文件时使用错误...

Global site tag (gtag.js) - Google Analytics