`

“回到顶端”按钮实现

 
阅读更多 
<html>
<head>
    <title>“回到顶端”按钮实现</title>
    <script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 15) {
                    $('.back-to-top').fadeIn(100);
                } else {
                    $('.back-to-top').fadeOut(100);
                }
            });

            // jQuery实现动画滚动
            $('.back-to-top').click(function(event) {
                event.preventDefault();
                $('html, body').animate({scrollTop: 0}, 500);
            })
        });
    </script>
</head>
<body>
<div id="content">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div class="back-to-top">back-to-top</div>
</div>
</body>
</html>






  • 大小: 39.3 KB
  • 大小: 38.6 KB
分享到：
| 用jquery实现输入框消失文字
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    特效代码——回到顶端

    在本专题中，我们将深入探讨"回到顶端"特效代码的实现方法。 一、HTML结构 首先，我们需要在页面的适当位置（通常在页面底部）添加一个"回到顶部"的按钮。这个按钮可以用一个简单的`&lt;a&gt;`标签来创建，设置其`href`...

    jsp页面回到页面顶端

    这种需求催生了"回到页面顶端"的功能，它通常表现为一个固定在页面底部或侧边的按钮，点击后页面瞬间滚动回顶部。本文将详细介绍实现这一功能的几种常见方法。 1. **JavaScript/jQuery方法** JavaScript 或 jQuery...

    回到顶端插件ScrollUp.zip

    标题中的“回到顶端插件ScrollUp.zip”表明这是一个前端开发中的工具，主要用于网站设计，它提供了一个功能，使用户能够方便地返回页面顶部。这个插件可能是基于HTML5、jQuery、JavaScript、CSS这些技术实现的，因此...

    网页返回顶端代码

    网页返回顶端代码是一种常见的网页交互功能，它允许用户在浏览页面时快速返回页面的顶部，无需手动滚动。这种功能在长页面中尤其有用，能够提高用户体验。本文将深入探讨实现这个功能的技术细节、常见方法以及如何在...

    jQuery实现返回顶部

    // 页面回到顶部，淡出按钮 } }); // 点击按钮，平滑滚动到页面顶部 $('#back-to-top').click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 800); // 800ms内平滑滚动 })...

    返回页面顶部，顶端

    标题“返回页面顶部，顶端”和描述中的博文链接暗示了我们将在讨论网页设计中的一个常见功能，即“返回顶部”的按钮或链接。这个功能允许用户快速地将浏览器滚动到页面的开头，通常在页面滚动一定距离后显示。这种...

    回到顶端插件ScrollUp特效代码

    "回到顶端插件ScrollUp特效代码"就是专为此目的设计的工具，它利用JavaScript库jQuery来实现，使得用户只需点击一个按钮，就能轻松地将页面滚动回顶部，避免了长篇幅内容浏览时的不便。 ScrollUp插件的核心在于它的...

    shopex 485返回顶端插件

    对于CSS，你可能需要调整返回顶端按钮的样式以匹配网站的主题，包括颜色、大小、位置以及鼠标悬停时的效果。这些都可以在"backtotop"文件中找到并进行编辑，或者直接在Shopex的CSS自定义区域添加样式规则。 此外，...

    JS实现部分HTML固定页面顶部随屏滚动效果

    我们经常在淘宝网看到这样的特效，商品列表特别长，而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了，那么它会自动判断是否到顶端了，然后一直置顶从而不怕遮挡。 这种特效是通过JavaScript和CSS实现的...

    js控制的回到页面顶端goTop的代码实现

    在网页设计中，为了提供更好的用户体验，经常会在页面底部设置一个“回到顶端”的按钮，方便用户快速滚动到页面的开始位置。本篇文章将探讨如何使用JavaScript实现这一功能，特别是通过`goTop`函数来实现这一效果。 ...

    点击返回顶端.zip

    网页中的“点击返回顶端”功能，通常被称为“回到顶部”或“顶部链接”，它通过一个按钮或者链接来实现。这个按钮通常被放置在页面的底部或者侧边栏，以便用户在浏览页面底部时能够轻松找到。当用户点击这个按钮时，...

    javascript实现博客园页面右下角返回顶部按钮

    标题中的“javascript实现博客园页面右下角返回顶部按钮”是指使用JavaScript编程语言来创建一个功能，该功能在用户滚动页面时，会在页面的右下角显示一个图标或按钮，当用户点击这个按钮时，页面会平滑地滚动回顶部...

    jquery 返回顶端组件

    当页面回到顶部，按钮消失。以下是一个简单的实现： ```javascript $(document).ready(function() { var $backToTop = $('#back-to-top'); $(window).scroll(function() { if ($(this).scrollTop() &gt; 100) { //...

    iscroll分页滚动（加回到顶部）

    通常，我们会在页面的某个角落（如右下角）放置一个返回顶部的按钮，当用户点击时，调用`scrollTo`方法将滚动位置设置为(0,0)，即页面的最顶端。为了增加用户体验，还可以添加平滑滚动效果，通过设置`scrollTo`的第...

    jquery 滑动到页面顶端效果

    接下来，创建一个按钮或者链接元素，用于触发回到顶部的动作。这个元素通常放在页面底部或侧边栏，以便用户随时可见： ```html 返回顶部 ``` 现在，我们可以编写 jQuery 代码来实现滑动到页面顶端的功能。当用户...

    返回顶部按钮

    "返回顶部按钮"是网页和应用中常见的交互元素，它主要设计用于方便用户在大量内容滚动后快速返回页面的顶端。这个功能在长篇幅的文章、列表或滚动区域特别实用，比如社交媒体、论坛和电子商务网站。在本项目中，我们...

    jquery回到顶部插件jquery.goup.js

    为了提供更好的用户体验，许多开发者选择引入“返回顶部”功能，使用户只需点击一下，就能快速回到页面的顶端。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件来实现这样的功能。今天我们将深入探讨一款名...

    C#轻松解决后页面滚动到顶端

    页面回传是Web开发中的术语，指的是当用户与网页上的某个元素（如按钮）互动时，浏览器发送请求给服务器，服务器响应并可能更新页面内容的过程。在ASP.NET中，页面回传是处理用户事件的一种常见机制。 ### 内容部分...

    基于SpringBoot+Activiti+Bootstrap实现的办公自动化系统，难度适中，特别适合拿来做本科毕业设计

    系统主页面顶端导航栏“退出”按钮提供登出系统功能，登出系统会删除服务器session信息，并回到登陆页面。 3.2.2 查看个人信息 用户成功登录系统后会直接跳转到用户的个人信息界面，用户也可以手动选择左侧菜单栏...

Magicbox
Global site tag (gtag.js) - Google Analytics