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

页面滚动到顶部功能以及按钮隐藏显示

阅读更多

在页面中内容很多时,常常需要一键置顶的功能。即页面的右下角会显示一个向上的箭头,点击一下,就直接滚动到页面最上面。当滑动到第一页时,此时不需要置顶,置顶的箭头自动隐藏。

大家观察一下,内容较多在门户网站,例如新浪、网易均有这样的功能。那这个小功能是如何实现的呢? 直接上代码吧

<div class="content">
    <p>等你, 在雨中, 在造虹的雨中
蝉声沉落, 蛙声升起
一池的红莲如红焰, 在雨中
你来不来都一样, 竟感觉
每朵莲都像你
尤其隔着黄昏, 隔着这样的细雨
永恒, 刹那, 刹那, 永恒
等你, 在时间之外在时间之内,
等你, 在刹那, 在永恒
如果你的手在我的手里, 此刻
如果你的清芬
在我的鼻孔, 我会说, 小情人
    </p>
</div>
<div class="goToTop none">
        置顶
</div>
$('body').on('click', 'p', function () {
            var _this = $(this);
            var copyed = _this.clone(true);
            _this.after(copyed);
        });
        $(window).on('scroll', function () {
            var scrollTop = $('body').scrollTop();
            if (scrollTop > 300) {
                $('.goToTop').removeClass('none');
            }else {
                $('.goToTop').addClass('none');
            }
        });
        $('.goToTop').on('click', function(){
            $('body').scrollTop(0);
        });

  css

.goToTop {
    position: fixed;
    right: 0;
    bottom: 10px;
    z-index: 200;
    width: 20px;
    background-color: #2e6da4;
}

 注:这里偷人懒,用文字“置顶”代替了箭头。置顶的文字(或箭头)应该始终在页面右下角区域,并且是可见状态,所以需要是position: fixed。

分享到:
评论

相关推荐

    jQuery插件页面滚动返回顶部按钮

    jQuery作为一个广泛使用的JavaScript库,提供了许多便利的功能来增强页面交互,其中包括实现页面滚动时显示返回顶部按钮的效果。下面我们将详细讨论jQuery如何实现这一功能。 首先,我们需要理解jQuery的基本用法。...

    Bootstrap顶部浮动导航菜单页面滚动显示隐藏.zip

    在本项目中,我们关注的是"Bootstrap顶部浮动导航菜单页面滚动显示隐藏"这一功能。这个功能通常用于创建响应式的网页,使得在页面滚动时,导航栏能够智能地根据用户的滚动行为进行显示或隐藏。 在`index-bs3.html`...

    基于jquery实现页面滚动时顶部导航显示隐藏

    通过阅读本文的描述和分析以上内容,可以了解到如何利用jQuery实现顶部导航栏在页面滚动时的显示与隐藏效果。这种效果在很多网站上都有应用,例如淘宝等知名网站,也是提升用户体验的一个重要手段。希望本文能帮助到...

    微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    例如,当页面滚动到一定高度时,导航栏或底部按钮等可以自动隐藏,当用户向上滚动页面时,这些元素又会重新显示出来。 本文将介绍如何通过编写wxml、wxss和js代码来实现上述功能。首先,我们可以在wxml文件中定义...

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

    4. **编写jQuery代码**:使用jQuery监听滚动事件,当页面滚动到一定距离时显示返回顶部按钮,点击按钮则让页面滚动到顶部: ```javascript $(document).ready(function() { var offset = 200; // 滚动多少像素后...

    jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回顶部按钮

    在这个项目中,“jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返回顶部按钮”正是这样一个功能的实现。下面将详细解释这个项目的实现原理和涉及的技术。 首先,`jQuery` 是一个广泛使用的JavaScript...

    jquery返回顶部隐藏按钮.rar

    3. **jQuery实现**:在页面加载完成后,监听滚动事件,当页面滚动到一定距离时,显示返回顶部按钮。点击按钮时,利用`animate()`方法平滑滚动到页面顶部。 ```javascript $(document).ready(function() { $(window...

    页面不在顶部时则右边显示返回顶部按钮否则不现实

    本例中采用的是智能显示方式,即只有当用户将页面滚动到非顶部位置时,该按钮才会出现。这种设计的优点在于,它不会在不必要的时候占用页面空间,保持了页面的简洁性,同时在用户需要时又能提供即时帮助。 实现这样...

    滚动条返回顶部 jquery实现

    当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值,如果这个值大于某个特定的数字...

    jQuery超出屏幕高度显示返回顶部.zip

    在本插件中,jQuery被用来监听页面滚动事件,当页面滚动到超过预设屏幕高度时,显示返回顶部按钮。按钮的显示和隐藏是通过CSS的可见性控制,而按钮的点击事件则触发页面滚动到顶部的动画。 这个jQuery在线客服代码...

    通过按钮控制框架的显示与隐藏

    为了实现按钮控制框架的显示与隐藏功能,关键在于正确利用JavaScript来操作框架集(`frameset`)的属性。通过获取`parent`对象并访问对应的框架,可以动态地更改框架的行或列定义,从而达到显示或隐藏的效果。 ####...

    淘宝网随滚动条滚动的TOP按钮.rar

    这个按钮在页面滚动到一定位置时会自动显示,随着用户继续滚动,按钮始终保持在屏幕可见范围内,直到用户点击或者页面回到顶部。 标签“JS特效-弹窗漂浮”提示了实现这个功能所涉及的技术。JS特效是指利用...

    jquery返回顶部隐藏按钮.zip

    在这个项目中,返回顶部按钮可能被设置为默认隐藏,只有当用户滚动页面到一定位置时才会显示。这可以通过CSS的`display`属性来实现,例如使用`display: none`隐藏元素,然后通过JavaScript控制将其更改为`display: ...

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

    ### 标题解析:“C#轻松解决后页面滚动到顶端” 标题直接指向了文章的核心主题——使用C#处理页面回传后的滚动位置问题。这暗示了文章将提供一种解决方案,使开发者能够编写C#代码来保持页面滚动状态,即使在发生了...

    淘宝网随滚动条滚动的TOP按钮

    当用户滚动页面时,JavaScript会监听`scroll`事件,并根据页面的滚动位置来决定是否显示或隐藏返回顶部的按钮。当按钮被点击时,会触发一个函数,通过修改`window.scrollY`的值,使页面瞬间滚动回顶部。例如,可以...

    jQuery实现回到顶部按钮效果

    // 如果页面滚动距离大于500像素,显示返回顶部按钮 if ($(this).scrollTop() &gt; 500) { $("#gotoTop").fadeIn(200); // 使用淡入效果显示 } else { $("#gotoTop").fadeOut(200); // 页面滚回顶部,淡出按钮 } ...

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

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

    JS制作的返回网页顶部按钮代码

    以上就是使用JavaScript制作返回网页顶部按钮的基本原理和实现方法。这个功能能提升用户体验,特别是在内容丰富的长页面中,让用户能够方便快捷地回到页面顶部。通过调整CSS样式,还可以进一步定制按钮的外观,使其...

    jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.

    通过jQuery,我们可以轻松地实现鼠标悬停显示二维码,以及页面滚动时显示返回顶部按钮的效果。在实际项目中,根据具体需求,你可能还需要处理更多细节,如调整元素的样式、优化动画效果等。在提供的压缩文件`texiao...

    网页返回顶部代码

    当用户滚动页面时,如果页面滚动距离超过一定值,按钮就会显示出来;反之,回到顶部时隐藏。可以使用`window.onscroll`事件和`window.pageYOffset`属性来检测滚动位置: ```javascript window.onscroll = function...

Global site tag (gtag.js) - Google Analytics