如何使用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