Jak dodać płynne przewijanie z powrotem do początku za pomocą przycisku js?

Question

I wprowadziły ten przy użyciu jQuery, ale chcesz utworzyć komponent w reagują na to samo

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

W moim stopki strony

<a href="#" class="move-top">↑</a> 

Answer 1

Po pierwsze, musimy śledzić stronę jak to przewijane w stan składnika. To śledzenie powinno się odbywać tylko podczas montażu komponentu. Można to zrobić tak:

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

Uwaga: To jest nadal przy użyciu jQuery, aby uzyskać aktualną pozycję przewijania. Zobacz this question, aby zrobić to bez jQuery.

Następnie musimy uczynić komponent:

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

ta jest nadal przy użyciu jQuery zrobić rzeczywisty przewijanie. Spójrz na this question do przewijania bez jQuery.

Jeśli chcesz, aby ten komponent pojawiał się i znikał, powinieneś go zawinąć w ReactCSSTransitionGroup i użyć animacji CSS. Jest to udokumentowane na React docs. Jest to demonstracja JSFiddle.

Answer 2

Po wyszukaniu w google, osiągnąłem kod jQuery zgodnie z Twoimi potrzebami w JSFiddle. Potem kolejność swoją 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

Proszę.

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

Użyj następującego kodu:

smoothScroll.scrollTo(ID_OF_DOM_ELEMENT, OPTIONAL_CALLBACK_ON_SCROLL_DONE) 

Kod:

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

myślę react-scroll jest warte wzmianki, dodać go do komponentu click obsługi (onClick={this.handleClick})

import Scroll from 'react-scroll' 

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

Z opcjami będącymi obiektami określonymi na Props/Options