`

使用Jquery 实现scroll to top 效果

 
阅读更多
$(document).ready(function(){
$(window).scroll(function () {
        if($(window).scrollTop()=="0") {
            $('.back_top').fadeOut(300)
        }else {
            $('.back_top').fadeIn(300)
        }
    });
$('.back_top').click(function(){$("html,body").animate({scrollTop:0},300);return false});
});
分享到:
评论

相关推荐

    Scroll to Top Button using JQuery.zip

    在本项目中,"Scroll to Top Button using JQuery.zip" 是一个使用JavaScript库JQuery实现页面滚动到顶部功能的示例。这个压缩包包含了实现这一功能所需的文件,主要关注点是利用JQuery简化JavaScript代码,为网页...

    jquery-scroll-follow.rar_Follow_ Follow

    <script src="path/to/jquery-scroll-follow.js"> ``` 3. 调用插件:在页面加载完成后,使用jQuery选择器选择需要跟随滚动的元素,并调用`.scrollFollow()`方法,设置相应的参数。 ```javascript $(document)....

    jQuery实现返回顶部

    这可以通过监听`scroll`事件和使用`animate`函数来实现: ```javascript $(document).ready(function() { // 当页面滚动超过50px时显示返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() > ...

    scrollToTop - a jQuery plugin

    One click to scroll back to the top of the webpage. http://geniuscarrier.com/scrolltotop-a-jquery-plugin/

    jQuery下的返回顶部功能的实现实例页面

    为了实现返回顶部的功能,我们创建一个名为`backtoTop.js`的JavaScript文件。在这个文件中,我们需要编写jQuery代码来监听滚动事件并处理按钮的显示和隐藏,以及点击事件来实现返回顶部的动作。以下是`backtoTop.js`...

    jquery实现返回顶部

    本文将详细介绍如何使用 jQuery 实现“返回顶部”的功能。 ### 一、HTML 结构 首先,我们需要在页面底部添加一个“返回顶部”的按钮,通常将其设置为一个链接元素(`<a>`),并隐藏在页面的角落里,如右下角: ``...

    jQuery实现返回顶部按钮效果

    在本例中,我们将讨论如何使用jQuery库来实现这一效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等任务。要创建“返回顶部”按钮,我们需要以下几部分: 1. **HTML结构**:在...

    jquery 滑动到页面顶端效果

    通过上述步骤,我们已经成功地使用 jQuery 实现了滑动到页面顶端的效果。这个功能可以极大地提高网站的可用性和用户满意度,尤其对于内容丰富的长页面来说更为重要。在实际应用中,你可以根据自己的需求调整代码,...

    jquery实现回到顶部功能(带隐藏功能

    在这个主题中,我们将深入探讨如何使用jQuery这一流行的JavaScript库来实现这个功能,并且该功能还包含了一个隐藏按钮的设计。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及...

    jquery实现返回顶部2

    本文将深入探讨如何使用jQuery来实现这个实用的功能。 jQuery是一个强大的JavaScript库,它简化了JavaScript的DOM操作,动画效果以及事件处理。在"返回顶部2"这个项目中,我们将看到如何利用jQuery的特性来创建一个...

    js+css实现回到顶部按钮(back to top).docx

    "JS+CSS实现回到顶部按钮(Back to Top)" 通过本文,我们可以学习到使用JS和CSS实现回到顶部按钮的方法。这个功能可以在页面滚动时出现一个回到顶部的按钮,以便用户快速回到页面的顶部。 首先,我们需要在HTML中...

    jQuery实现带底部返回顶部按钮功能特效源码.zip

    在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得复杂的交互效果变得简单易行。本资源"jQuery实现带底部返回顶部按钮功能特效源码.zip"提供了一种利用jQuery实现页面...

    返回顶部 jquery scrolltop

    总结一下,本教程介绍了如何使用jQuery实现一个兼容IE6到11的“返回顶部”功能,包括按钮的图片显示、渐入渐出效果和滚动监听。通过理解并应用这些代码,你可以为自己的网站增添这一实用功能,提升用户体验。

    jquery平滑返回顶部效果(兼容IE6)

    本文将详细介绍如何使用jQuery实现平滑的返回顶部效果,并确保该功能在古老的Internet Explorer 6(简称IE6)上也能正常工作。 首先,我们需要引入jQuery库,因为这个功能是基于jQuery构建的。你可以通过以下代码将...

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

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

    jQuery带微博按钮返回顶部效果

    本教程将详细讲解如何利用jQuery实现一个带有微博样式按钮的返回顶部效果。 首先,我们需要理解jQuery的基础知识。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。...

    jquery回到顶部效果

    在本案例中,我们关注的是使用jQuery实现这一效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建,使得开发此类功能变得更加便捷。 首先,我们需要在HTML中添加一个"回到顶部"的...

    jQuery实现的悬浮网站右侧带微信二维码图片的返回底部及顶部效果代码.zip

    这篇文章将详细讲解如何使用jQuery库来实现一个具有悬浮在网站右侧、包含微信二维码图片的返回顶部及底部功能的代码实现。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得...

    jquery实现返回顶部源代码

    本篇文章将深入探讨如何使用jQuery来实现这一功能,并分享一段实用的源代码。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。对于“返回顶部”功能,我们可以利用jQuery的动画...

    jQuery实现返回顶部和底部浮窗特效源码.zip

    这可以使用CSS的`position: fixed`属性配合jQuery来实现。例如: ```css .bottom-fixed { position: fixed; bottom: 0; width: 100%; text-align: center; /* 根据需求调整样式 */ } ``` ```javascript $...

Global site tag (gtag.js) - Google Analytics