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

Question

我已经实现这个使用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> 

Answer 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演示。

Answer 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>

Answer 3

在这里你去。

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>); 
    } 
}); 

Answer 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); 
    } 
}; 

Answer 5

我觉得react-scroll是值得被提及，它添加到您的组件的click处理器（onClick={this.handleClick}）

import Scroll from 'react-scroll' 

... 
Scroll.animateScroll.scrollToTop({options}) 
... 

随着选项被指定为一个对象Props/Options