关键词：
【中文标题】如何使用 React js 添加平滑滚动返回顶部按钮？【英文标题】：How to Add Smooth Scrolling Back To Top Button using react js? 【发布时间】：2016-03-17 15:44:07 【问题描述】：我已经使用 jquery 实现了这个，但想创建一个组件来响应做同样的事情
<script>
jQuery(document).ready(function()
var offset = 220;
var duration = 500;
jQuery(window).scroll(function()
if (jQuery(this).scrollTop() > offset)
jQuery('.move-top').fadeIn(duration);
else
jQuery('.move-top').fadeOut(duration);
);
jQuery('.move-top').click(function(event)
event.preventDefault();
jQuery('html, body').animate(scrollTop: 0, duration);
return false;
)
);
</script>
在我的页脚中
<a href="#" class="move-top">↑</a>
【问题讨论】：
如果这是你个人学习react，那么这是一个很好的小代码学习。但如果这应该用于实际产品，为什么要引入 react 来做这么简单的事情？ 仅供学习。我想以反应的方式来做。 【参考方案1】：首先，我们需要跟踪页面在组件状态下的滚动情况。这种跟踪应该只在组件安装时发生。可以这样做：
getInitialState: function()
return scrollTop: 0 ;
,
componentWillMount: function()
window.addEventListener('scroll', this.handleScroll);
,
componentWillUnmount: function()
window.removeEventListener('scroll', this.handleScroll);
,
handleScroll: function()
this.setState(scrollTop: $(window).scrollTop());
,
注意：这仍然是使用 jQuery 来获取当前滚动位置。请参阅 this question 以在不使用 jQuery 的情况下执行此操作。
然后我们需要渲染组件：
scrollToTop: function()
$(window).animate(scrollTop: 0, this.props.duration);
,
render: function()
if (this.state.scrollTop < this.props.offset)
return null;
return <a href="#" className="move-top" onClick=this.scrollToTop>↑</a>
这仍然使用 jQuery 来进行实际的滚动。看看this question 没有 jQuery 的滚动。
如果你想让这个组件淡入淡出，你应该用ReactCSSTransitionGroup 包裹它并使用CSS 动画。这记录在React docs。
这是一个JSFiddle 演示。
【讨论】：
【参考方案2】：在 google 上搜索后，我在 JSFiddle 中找到了您需要的 jQuery 代码。然后，我重新排序了你的 jQuery：
$(document).ready(function()
$(window).scroll(function()
if ($(this).scrollTop() > 100)
$('.move-top').fadeIn();
else
$('.move-top').fadeOut();
);
$('.move-top').click(function()
$("html, body").animate(
scrollTop: 0
, 600);
return false;
);
);.container
min-height: 1000px;
.move-top
position: fixed;
bottom: 50px;
right: 100px;
display: none;
padding: 10px 15px;
color: #fff;
font-weight: 600;
background: #333;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h1>Page Header</h1>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a class="move-top" href="#">↑</a>
</div>
<h3>Page Footer</h3>【讨论】：
我需要在 reactjs 中简单实现这个。【参考方案3】：如果你想完全避免使用 jQuery
var Example = React.createClass(
scrollUp: function ()
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (top > 0)
window.scrollTo(0, top - 15)
setTimeout(this.scrollUp, 10)
,
render: function ()
return (<div><h1>Page Header</h1>
<div ref="container" className="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a className="move-top" onClick=this.scrollUp>Up</a>
</div>
</div>);
);
【讨论】：
请注意window.scrollTo的浏览器兼容性：developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo【参考方案4】：像这样使用下面的代码：
smoothScroll.scrollTo(ID_OF_DOM_ELEMENT, OPTIONAL_CALLBACK_ON_SCROLL_DONE)
代码：
var smoothScroll =
timer: null,
stop: function ()
clearTimeout(this.timer);
,
scrollTo: function (id, callback)
var settings =
duration: 1000,
easing:
outQuint: function (x, t, b, c, d)
return c*((t=t/d-1)*t*t*t*t + 1) + b;
;
var percentage;
var startTime;
var node = document.getElementById(id);
var nodeTop = node.offsetTop;
var nodeHeight = node.offsetHeight;
var body = document.body;
var html = document.documentElement;
var height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
var windowHeight = window.innerHeight
var offset = window.pageYOffset;
var delta = nodeTop - offset;
var bottomScrollableY = height - windowHeight;
var targetY = (bottomScrollableY < delta) ?
bottomScrollableY - (height - nodeTop - nodeHeight + offset):
delta;
startTime = Date.now();
percentage = 0;
if (this.timer)
clearInterval(this.timer);
function step ()
var yScroll;
var elapsed = Date.now() - startTime;
if (elapsed > settings.duration)
clearTimeout(this.timer);
percentage = elapsed / settings.duration;
if (percentage > 1)
clearTimeout(this.timer);
if (callback)
callback();
else
yScroll = settings.easing.outQuint(0, elapsed, offset, targetY, settings.duration);
window.scrollTo(0, yScroll);
this.timer = setTimeout(step, 10);
this.timer = setTimeout(step, 10);
;
【讨论】：
【参考方案5】：我认为react-scroll 值得一提，将其添加到组件的click 处理程序（onClick=this.handleClick）
import Scroll from 'react-scroll'
...
Scroll.animateScroll.scrollToTop(options)
...
选项是根据Props/Options指定的对象
【讨论】：
【参考方案6】：我不建议混合使用 jQuery 和 React/Angular。使用 'react-scroll' 可以轻松完成，如下所示：
import React, Component from 'react';
import ReactDOM from 'react-dom';
import animateScroll as scroll from 'react-scroll';
class Scrolltotop extends Component
ScrollTo()
scroll.scrollToTop();
render()
return (
<div className="move-top-wrap">
<div onClick=this.ScrollTo class="move-top">↑</div>
</div>
);
export default Scrolltotop;
您可以查看所有basic examples of react-scroll usage here。
您现在可以在任何地方导入和使用该组件。
【讨论】：
前端平滑滚动到底部/顶部(代码片段)
...处，添加css1html2scroll-behavior:smooth;3添加全局css之后，直接使用window.scroll(0,0)就可以平滑滚动到顶部了。注：兼容性很差，仅支持火狐、chrome高级版本2.指定滚动操作，使用平滑效果平滑滚动到某块元素的底部：scrollIntoView1letanchorE... 查看详情
使用按钮滚动后如何返回活动顶部？
】使用按钮滚动后如何返回活动顶部？【英文标题】：Howtoreturntothetopofanactivityafterscrollingusingabutton?【发布时间】：2019-06-2019:22:34【问题描述】：我正在创建一个使用滚动视图的应用程序，但不知道如何实现一个按钮，当按下该... 查看详情
如何在 react-native 中的 onPress 按钮上滚动顶部？
】如何在react-native中的onPress按钮上滚动顶部？【英文标题】：HowcaniscrolltopononPressofbuttoninreact-native?【发布时间】：2018-07-1613:56:04【问题描述】：我在简单屏幕的底部添加了按钮，我想在按下按钮时滚动顶部。什么代码添加到按... 查看详情
RecyclerView - 如何平滑滚动到嵌套滚动视图内某个位置的项目顶部？
】RecyclerView-如何平滑滚动到嵌套滚动视图内某个位置的项目顶部？【英文标题】：RecyclerView-HowtosmoothscrolltotopofitemonacertainpositioninsideNestedscrollview?【发布时间】：2018-07-1304:25:15【问题描述】：我实现了Recycler视图，当点击recyclervie... 查看详情
如何通过平滑滚动将最后一行添加到 UITableView？
】如何通过平滑滚动将最后一行添加到UITableView？【英文标题】：HowtoaddlastrowtoUITableViewwithsmoothscrolling?【发布时间】：2016-07-1110:09:09【问题描述】：我正在使用UITableView构建聊天界面。我正在使用下面的代码添加单元格self.tableView... 查看详情
three.js进阶之旅：页面平滑滚动-王国之泪💧(代码片段)
本文使用React+Three.js+ReactThreeFiber技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解R3F中useFramehook及useThreehook基本原理及用法；了解@re... 查看详情
如何设置平滑滚动的偏移量
】如何设置平滑滚动的偏移量【英文标题】：HowtoSetOffsettforSmoothScroll【发布时间】：2012-10-2822:35:26【问题描述】：我已经在mysite上实现了CSSTricksSmoothPageScroll，它工作得很好。但是，因为我在页面顶部有一个固定的nav，所以当页... 查看详情
React useRef 将平滑滚动添加到除 Internet Explorer 之外的所有浏览器都支持的 div
】ReactuseRef将平滑滚动添加到除InternetExplorer之外的所有浏览器都支持的div【英文标题】：ReactuseRefaddsmoothscrollingtodivthatallbrowserexceptinternetexploresupports【发布时间】：2020-05-2215:54:31【问题描述】：我在实现基于React的useRef的元素的... 查看详情
使用 JavaScript 滚动到页面顶部？
...singJavaScript?【发布时间】：2010-11-1119:15:13【问题描述】：如何滚动条立即跳到页面顶部也是可取的，因为我不想实现平滑滚动。【问题讨论】：2019，避免“本站出现使用滚动链接定位效果。这可能不适用于异步平移”使用我的... 查看详情
使用 JavaScript 滚动到页面顶部？
...singJavaScript?【发布时间】：2010-11-1119:15:13【问题描述】：如何滚动条立即跳到页面顶部也是可取的，因为我不想实现平滑滚动。【问题讨论】：2019，避免“本站出现使用滚动链接定位效果。这可能不适用于异步平移”使用我的... 查看详情
添加新项目时如何使用无限滚动更新项目列表
】添加新项目时如何使用无限滚动更新项目列表【英文标题】：HowtoupdatelistofitemswithInfinitescrollwhennewitemadded【发布时间】：2021-03-1811:41:50【问题描述】：我在React.js上实现了无限滚动这是我的无限滚动组件，它工作正常。importReact... 查看详情
顺畅滚动到顶部(代码片段)
...尝试设置“平滑滚动到元素-没有jquery插件”但我不知道如何在无数次尝试之后安排它。我也使用过window.scrollTo(0,0);，但它会立即滚动。谢谢！另外：http://jsfiddle.net/WFd3V/-代码可能是标签class="smoothScroll"，因为我的其他元素使用它... 查看详情
使用 React JS 无限滚动
】使用ReactJS无限滚动【英文标题】：InfinitescrollingwithReactJS【发布时间】：2014-02-0921:33:30【问题描述】：我正在寻找使用React实现无限滚动的方法。我遇到了react-infinite-scroll并发现它效率低下，因为它只是将节点添加到DOM而不会... 查看详情
滑动时React Bootstrap Carousel滚动顶部
...描述】：我试图弄清楚当我滑动到下一个或上一个项目时如何让我的Reactstrap轮播向上滚动。这正是我需要它工作的方式BootstrapCarouselscrolltopwhenslide但是我使用reactstrap节点模块以另 查看详情
javascript平滑滚动到页面顶部(代码片段)
完美平滑实现一个“回到顶部”(代码片段)
前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要的效果是要有点缓冲效果。现代浏览器陆续意识到... 查看详情
javascript[jquery]平滑滚动到页面顶部(代码片段)
在具有动画滚动功能的threeJS画布中，如何防止向上滚动超出页面顶部？
】在具有动画滚动功能的threeJS画布中，如何防止向上滚动超出页面顶部？【英文标题】：InathreeJScanvaswithananimatedscrollfunction,howdoIpreventscrollingupbeyondthetopofthepage?【发布时间】：2021-11-2812:08:57【问题描述】：我正在基于thistutorial在T... 查看详情