प्रतिक्रिया जेएस का उपयोग कर चिकना स्क्रॉलिंग शीर्ष बटन पर वापस कैसे जोड़ें?

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 का उपयोग कर रहा है। JQuery के बिना ऐसा करने के लिए this question देखें।

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 उपयोग कर रहा है:

फिर हम घटक रेंडर करने के लिए की जरूरत है। JQuery के बिना स्क्रॉलिंग के लिए this question देखें।

यदि आप इस घटक को फीका और बाहर करना चाहते हैं, तो आपको इसे ReactCSSTransitionGroup में लपेटना चाहिए और सीएसएस एनिमेशन का उपयोग करना चाहिए। यह React docs पर प्रलेखित है।

यहां एक JSFiddle डेमो है।

Answer 2

Google पर खोज करने के बाद, मैं JSFiddle में आपकी आवश्यकताओं के रूप में एक 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

ये रहा: तो फिर, मैं अपने 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>); 
    } 
}); 

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