正文

页脚滚动顶部的“返回顶部”

 2023-03-21  295

关键词：

【中文标题】页脚滚动顶部的“返回顶部”【英文标题】：'Back to top' on scroll top at footer 【发布时间】：2015-03-03 00:39:07 【问题描述】：

使用我在周围看到的一些示例，当您向下滚动页面时，我有一个 返回顶部按钮 可以显示和工作，但是有没有办法让按钮粘在屏幕底部，直到到达页脚，它将粘在页脚顶部？

这是我目前的代码：

<script type="text/javascript" defer="defer">
    $(window).scroll(function() 
        if ($(this).scrollTop()) 
            $("#toTop").fadeIn();
         else 
            $("#toTop").fadeOut();
        
    );


    $("#toTop").click(function() 
        $("html, body").animate(scrollTop: 0, 1000);
    );
</script>

<style type="text/css">
    .backtotop_button_wrap width:100%; background:white; height:auto;
    .backtotop_button_height width:100%; height:55px;
    #toTop display:none; position: fixed; right:0; bottom:0; width:100px; height:auto; background:white; float:right; padding:10px; text-align:center; border:1px solid black; line-height:12px;
    #footer width:100%; height:500px; color:white; text-align:center; background:#313131; border-top:1px solid black;
</style>

<div class="backtotop_button_wrap">
    <div class="backtotop_button_height">
        <div id="toTop">^<br />Back to the Top</div>
    </div>
</div>
<div id="footer">
Footer
</div>

我在这里也做了一个 Jfiddle：http://jsfiddle.net/0Lge6wqq/

【问题讨论】：

您需要回到顶部才能始终显示你的意思是让它停在页脚吗？或者也看到背对顶框？因为在 jfiddle 中，如果您向下滚动预览平面，它应该沿底部显示框，这是我想要它做的，但随后在页脚的开头停止滚动。知道了。所以页脚应该推上面的框？ 【参考方案1】：

将#toTop 的html 位置更改为#footer。当窗口达到页脚的高度时。 #toTop 从固定变为相对。

     if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height())
            $('#toTop').css("position","fixed");    //resetting it
            $('#toTop').css("bottom","0"); //resetting it

else 
            $('#toTop').css("position","relative"); // make it related
            $('#toTop').css("bottom","60px"); // 60 px, height of #toTop

jsfiddle

http://jsfiddle.net/0Lge6wqq/4/

【讨论】：

它工作正常，但最好切换类而不是切换样式。

向下滚动之前，在页面加载时显示粘滞的“返回顶部”按钮

】向下滚动之前，在页面加载时显示粘滞的“返回顶部”按钮【英文标题】：Sticky"backtotop"buttonshowingonpageload,beforescrollingdown【发布时间】：2014-04-1704:48:23【问题描述】：我按照教程获得了一个粘性“返回顶部”按钮，一... 查看详情

js返回顶部效果

...于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面... 查看详情

移动端返回顶部，再迅速滑动导致闪烁的bug

发现，当使用window元素滚动的时候（也就是documnet.documentElement)，返回顶部之后，再迅速下拉滑动，会出现闪烁卡顿的情况。暂停2秒左右，再滑动，则恢复。当然，前提是开启了touch滚动属性，也就是-webkit-overflow-scrolling:touch; ... 查看详情

html使用平滑滚动返回顶部(代码片段)

查看详情

前端点击回到当前页顶部

...scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能... 查看详情

Microsoft Access 如何在失去焦点时阻止滚动的文本字段返回顶部（如滚动到顶部）

】MicrosoftAccess如何在失去焦点时阻止滚动的文本字段返回顶部（如滚动到顶部）【英文标题】：MicrosoftAccesshowtostopscrolledtextfieldfromreturningtotop(likescroll-to-top)uponlosingfocus【发布时间】：2018-12-0806:00:32【问题描述】：我在Win10中使用A... 查看详情

如何使用 React js 添加平滑滚动返回顶部按钮？

】如何使用Reactjs添加平滑滚动返回顶部按钮？【英文标题】：HowtoAddSmoothScrollingBackToTopButtonusingreactjs?【发布时间】：2016-03-1715:44:07【问题描述】：我已经使用jquery实现了这个，但想创建一个组件来响应做同样的事情<script>jQu... 查看详情

javascript向下滚动时自动“返回顶部”链接(代码片段)

查看详情

原生js实现简洁的返回顶部组件

...回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。实现思路也很容易，只要改变document.documentElement.scrollTop或document.body.scrollTop的值... 查看详情

原生js返回顶部，带返回效果

...timer，方便接下来清除间隔器；之后我们设置一个页面的滚动事件，在里面定义一个变量获取一下所滚动的高查看详情

UIScrollView 无法正常工作（它返回顶部并且不显示任何滚动条

】UIScrollView无法正常工作（它返回顶部并且不显示任何滚动条【英文标题】：UIScrollViewdoesn\'tworkproperly(itbackstotopandnotshowsanyscrollers【发布时间】：2013-02-1413:33:41【问题描述】：我正在做一个iphone应用程序，其中有几个UILabel、UIText... 查看详情

js练习总结

...顶部当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。实现原理：当页面... 查看详情

androidlistview返回顶部，快速返回顶部的功能实现，详解代码。

...大家可以适当地美化在实际项目中可以换图标，去掉右侧滚动条等。具体ui美化不做解释。好了，首先我们是当不在顶部的时候，查看详情

js-特效～02.屏幕滚动事件dtdscroll顶部悬浮导航两侧跟随广告返回顶部小火煎

ceil向上取整floor向下取整round四舍五入缓动动画动画原理=盒子位置+步长清除定时器步长越来越小盒子位置=盒子本身位置+（目标位置-本身位置）/n（最好为10）最后10像素容易容易出现问题所以要向上取整400-396=4 4/10=0.4&nb... 查看详情

返回顶部(代码片段)

...较长的网页是，方便用户快速的回到顶部。首先是一个有滚动效果的长网页<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>*margin:0;padding:0;list-s 查看详情

转载|网页中返回顶部代码(多种方法)

..._self">返回顶部</a>方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）<ahref="javascript:scroll(0,0)"& 查看详情

在页面中有overflow-y:auto属性的div,当出现滚动条，点击返回顶部按钮，内容回这个div最顶部

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head><body><style>.lala{width:10%;background:pink;color:#333;heig 查看详情

返回顶部特效

<divstyle="height:3000px;background:gray;">clientHeight:内容可视区域的高度,与页面内容无关<br/><br/>offsetHeight:IE、Opera认为offsetHeight=clientHeight+滚动条+边框。NS、FF认为offsetHeight是网页内容实际高度，可以小于clie 查看详情