`
caiyingying234
  • 浏览: 26721 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

返回顶部的js实现

阅读更多
(function() {
    var backToTopTxt = "返回顶部", backToTopEle = $('<div class="backToTop tops"></div>').appendTo($("body"))
        .text(backToTopTxt).attr("title", backToTopTxt).click(function() {
            $("html, body").animate({ scrollTop: 0 }, 520);
    }), backToTopFun = function() {
        var st = $(document).scrollTop(), winh = $(window).height();
        (st > 0)? backToTopEle.show(): backToTopEle.hide();   
        //IE6下的定位
        if (!window.XMLHttpRequest) {
            backToTopEle.css("top", st + winh - 60);   
        }
    };
    $(window).bind("scroll", backToTopFun);
    $(function() { backToTopFun(); });
})();
分享到:
评论

相关推荐

    返回顶部JS代码

    10. **JS代码**:`js`文件通常会包含实现返回顶部功能的JavaScript代码,包括事件监听、DOM操作和动画逻辑。代码可能如下: ```javascript var backToTop = document.querySelector('.back-to-top'); window....

    Javascript返回顶部代码实现

    以上就是使用JavaScript实现返回顶部功能的主要步骤和涉及的知识点。这个简单但实用的功能可以通过自定义CSS样式和JavaScript逻辑进行扩展,以适应不同网站的设计需求。通过阅读和理解上述代码,你可以创建自己的...

    弹性返回顶部JS代码

    在网页设计中,"弹性返回顶部JS代码"是一种常见的用户交互功能,特别是在长页面或滚动内容较多的网站中。这个功能允许用户通过点击一个图标或按钮轻松地将页面滚动回顶部,提供更好的浏览体验。本篇文章将深入探讨这...

    js 网页返回顶部 置顶返回

    在网页设计中,"js 网页返回顶部 置顶返回" 是一个常见的功能需求,它允许用户轻松地将浏览器滚动到页面的顶部,提高用户体验。这一功能主要通过JavaScript实现,因为JavaScript是一种强大的客户端脚本语言,可以与...

    JS返回顶部代码

    在这个“JS返回顶部代码”中,我们将探讨如何利用JavaScript实现一个简单的功能,即当用户在浏览网页时,点击按钮能够使页面瞬间回到顶部。 返回顶部的功能在许多网站上都能看到,它通常以一个小图标或者文字形式...

    js动态返回顶部

    在本案例中,"js动态返回顶部"指的是利用JavaScript实现一个功能,即当用户在浏览网页时,页面滚动到一定位置后,提供一个“返回顶部”的按钮,点击该按钮可以使页面瞬间滚动回顶部。 首先,我们需要在HTML文件中...

    jQuery实现返回顶部

    在网页设计中,"返回顶部"功能是一个常见且实用的设计元素,它允许用户快速地将浏览焦点移回页面顶部,特别是在长页面...你可以参考这个案例,结合自己的需求进行修改和扩展,以实现符合自己网站风格的返回顶部功能。

    自动隐藏的弹性返回顶部JS代码

    标题中的“自动隐藏的弹性返回顶部JS代码”指的是在网页设计中实现的一种功能,它允许用户在浏览页面时,当滚动到页面底部时,会出现一个返回顶部的按钮,点击后可以快速回到页面顶部。这个功能通常用JavaScript实现...

    百度返回顶部JS源代码+返回顶部图片

    在网页设计中,"返回顶部...总结来说,"百度返回顶部JS源代码+返回顶部图片"提供了实现网页返回顶部功能的完整组件,包括视觉设计和交互逻辑。开发者可以将这些资源集成到自己的项目中,为用户提供方便的导航体验。

    js返回顶部效果 很炫

    在网页设计中,"js返回顶部"是一种常见的用户体验优化功能,它允许用户通过点击一个按钮或执行特定的JavaScript事件来迅速滚动到页面的顶部。这种效果不仅方便了用户浏览长页面,也增加了网站的交互性和专业性。"js...

    js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器

    这个功能也是通过JavaScript实现,通常会监听滚动事件,当用户滚动到一定距离时显示返回顶部按钮,再次点击则利用`window.scrollTo()`方法平滑滚动到页面顶部。为了增加用户体验,还会添加动画效果,使得页面滚动...

    返回顶部js

    本资源提供的"返回顶部js"是一个结合了JavaScript(js)和层叠样式表(css)的解决方案,旨在简化开发过程,让开发者能够轻松地将这一功能集成到自己的网站中。 首先,JavaScript(js)在这里起着关键作用,它是...

    利用js实现返回页面顶部

    以上就是使用JavaScript实现返回页面顶部的完整过程。通过这种方式,我们可以为网站增加一个实用且用户体验良好的功能。需要注意的是,为了让这个功能在不同的浏览器和设备上都能正常工作,最好使用现代的JavaScript...

    部分JS实现(返回顶部,商品略过显示)

    在JavaScript编程中,"返回顶部"和"商品略过显示"是两个常见的功能,它们提升了用户体验,使得用户在浏览网页时能更方便地操作。下面将详细解释这两个功能的实现方式。 首先,"返回顶部"功能通常是通过点击一个按钮...

    js实现变速返回顶部底部

    总结一下,本文主要介绍了如何使用JavaScript实现页面“返回顶部”的功能,并提供了实现平滑滚动的代码示例。通过结合HTML、CSS和JavaScript,我们可以为用户提供更加友好的交互体验,使得页面的返回顶部操作既直观...

    JS鼠标点击下端返回顶部特效.zip

    总之,JS鼠标点击下端返回顶部特效是通过JavaScript实现的一个实用功能,它提高了长页面的用户体验,让用户可以轻松快捷地返回页面顶部。理解并掌握这种技术对于前端开发者来说是至关重要的,因为它能够提升网站的...

    JS(jquery)实现返回顶部,感觉不错

    总的来说,利用jQuery实现返回顶部功能是一个简单但有效的提升网页用户体验的方法。它结合了JavaScript的动态性与jQuery的便利性,使得开发者能快速实现这一常见功能,同时保持代码的简洁和可维护性。通过不断学习和...

    JS 简单的点击返回顶部的功能

    例如,对于不支持jQuery的环境,可以使用原生JavaScript实现相同的功能。此外,还可以添加过渡效果或自定义动画,以提供更丰富的用户体验。 在压缩包文件"demo"中,可能包含了这个功能的完整示例代码,包括HTML、...

Global site tag (gtag.js) - Google Analytics