`
agevs
  • 浏览: 70772 次
  • 来自: 北京
博客专栏
924aba1e-229a-352e-b6d4-f15f3159a438
各种Web前端技巧经验分享...
浏览量:0
文章分类
社区版块
存档分类
最新评论

一个简单的返回顶部jQuery代码

阅读更多

本文演示jQuery返回顶部,当文章页比较长时间,可以方便用户返回网站的顶部,实现代码也不难,大家学习下!

 

调用代码:

<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scrollSilde.js"></script>
<script language="javascript" type="text/javascript" >
    $(function () {
        $(window).gotoTop({
            showHeight: 150, //设置滚动高度时显示
            speed: 200 //返回顶部的速度以毫秒为单位
        });
    });
</script>

 其中scrollSilde.js代码为:可以500%提高开发效率的前端UI框架!

//返回顶部
$(function () {
    $.fn.gotoTop = function (options) {
        var defaults = {
            showHeight: 150,
            speed: 1000
        };
        var options = $.extend(defaults, options);
        $(document.body).prepend("<div id='totop'><a></a><p></p></div>");
        var $toTop = $(this);
        var $top = $("#totop");
        var $ta = $("#totop a");
        var $bt = $("#totop p");
        $toTop.scroll(function () {
            var scrolltop = $(this).scrollTop();
            if (scrolltop >= options.showHeight) {
                $top.show();
            }
            else {
                $top.hide();
            }
        });
        $ta.click(function () {
            $("html,body").animate({ scrollTop: 0 }, options.speed);
        });
        $bt.click(function () {
            $("#mess").show();
        });
    }
});

 

分享到:
评论

相关推荐

    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实现返回顶部源代码

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

    jQuery平滑返回顶部代码.zip

    在网页设计中,提供一个平滑的返回顶部功能可以极大地提升用户体验,特别是在内容丰富的长页面中。本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法,利用了广泛使用的JavaScript库jQuery。接下来...

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

    在网页设计中,用户体验往往是非常重要的一环,而“返回顶部”功能则是一个常见的提升用户体验的设计元素。这个“简单实用jQuery返回顶部代码.zip”压缩包提供了一种利用jQuery实现这一功能的方法。jQuery是一个广泛...

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

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

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

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

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

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

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

    "jQuery可变透明度返回顶部代码"就是一个实现此类功能的JavaScript插件,它利用jQuery库的特性,通过调整按钮的透明度来增加用户体验。 该代码的核心思想是:当用户滚动到页面的第二屏时,返回顶部按钮才显现,并...

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

    本篇文章将详细解析如何使用jQuery技术实现一个绿色主题的QQ在线客服及返回顶部的功能。首先,我们依赖于jQuery-1.10.2.min.js库,这个版本的jQuery提供了丰富的DOM操作和事件处理能力,适合用于构建此类交互效果。 ...

    网站右侧二维码生成和返回顶部jQuery代码.rar

    基于jQuery编写的一个侧边特效,在网页的右侧自动生成可扫描的二维码图片,二维码内容为对应网页网址链接,同时带有返回顶部按钮。 功能介绍: 支持所有静态和动态网页页面,生成二维码可用手机软件我查查、魔码、...

    带微信二维码jQuery返回顶部效果代码,鼠标划过二维码图标会缩放弹出二维码图片,效果实用,兼容主流浏览器

    带微信二维码jQuery返回顶部效果代码,鼠标划过二维码图标会缩放弹出二维码图片,效果实用,兼容主流浏览器

    jQuery 缓冲返回网页顶部JS代码

    下面是一段基础的jQuery代码实现返回顶部功能: ```javascript $(document).ready(function() { // 当滚动条距离顶部小于100px时,显示返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() &gt; ...

    jQuery实现一个动画版返回顶部和底部的效果

    jQuery实现一个动画版缓动返回顶部和底部的效果,里面附有demo,可以根据需求直接修改

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

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

    jQuery返回顶部跟底部浮窗代码.zip

    2. JavaScript文件:通常以.js为扩展名,包含jQuery代码以实现返回顶部和底部的功能,以及可能的留言处理逻辑。 3. CSS文件:可能以.css为扩展名,定义了浮窗及按钮的样式。 4. 图像文件:可能包括箭头图标和其他...

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

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

    jQuery右侧悬浮返回顶部和分享按钮代码

    在网页设计中,返回顶部按钮是一个常见的功能,它允许用户快速滚动到页面的顶部,特别是在长页面中。jQuery提供了一种简单有效的方式来实现这一功能。这个代码示例中,使用jQuery创建了一个在页面滚动时会出现在右侧...

    jQuery网页右侧二维码返回顶部按钮代码

    这种设计通常出现在网页的右下角,包含一个二维码图标用于扫描关注,以及一个返回顶部的按钮,方便用户快速回到页面顶部。 首先,jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...

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

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

Global site tag (gtag.js) - Google Analytics