{"id":38435,"date":"2022-12-19T20:01:39","date_gmt":"2023-02-15T08:58:39","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/"},"modified":"2024-04-29T06:04:23","modified_gmt":"2024-04-28T22:04:23","slug":"%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/","title":{"rendered":"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u662f React Advent Calendar 2020 \u7684\u7b2c19\u5929\u7684\u6587\u7ae0\u3002<\/p>\n

\u9996\u5148<\/h2>\n

\u6211\u4eec\u5c06\u4f7f\u7528 react-scroll \u6765\u8f7b\u677e\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u3002
\n\u5b9e\u9645\u7684\u5b9e\u73b0\u975e\u5e38\u7b80\u5355\uff0c\u5e0c\u671b\u80fd\u4f5c\u4e3a\u53c2\u8003\u54e6\u3002<\/p>\n

\u76ee\u6807\u7269\u4f53<\/h2>\n
\"Image<\/div>\n

\u5b89\u88c5 react-scroll<\/h2>\n

\u9996\u5148\uff0c\u5b89\u88c5react-scroll\u3002<\/p>\n

npm install react-scroll\r\n<\/code><\/pre>\n
\u4ee3\u7801\u7684\u5b9e\u65bd\u90e8\u5206<\/h2>\n
    \n
  1. \n
      import react-scroll<\/ol>\n<\/li>\n<\/ol>\n
       <\/p>\n
        \n
      1. \n
          \u5b9e\u73b0scrollToTop\u529f\u80fd\uff08\u6eda\u52a8\u5230\u9875\u9762\u9876\u90e8\uff09<\/ol>\n<\/li>\n<\/ol>\n
           <\/p>\n
            \u5728\u6309\u94ae\u7684onClick\u4e8b\u4ef6\u4e2d\u8c03\u7528\u5b83\uff08\u5f53\u6309\u94ae\u88ab\u70b9\u51fb\u65f6\u8c03\u7528scrollToTop\u51fd\u6570\uff09<\/ol>\n
            import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/ScrollButton.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> animateScroll<\/span> as<\/span> scroll<\/span> }<\/span> from<\/span> '<\/span>react-scroll<\/span>'<\/span>;<\/span>  \/\/import<\/span>\r\n\r\nclass<\/span> ScrollButton<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n\r\n  \/\/ scrollToTop\u306e\u5b9f\u88c5<\/span>\r\n  scrollToTop<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    scroll<\/span>.<\/span>scrollToTop<\/span>();<\/span>\r\n  };<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>scrollToTop<\/span>}<\/span>><\/span>Click<\/<\/span>button<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\nexport<\/span> default<\/span> ScrollButton<\/span>;<\/span>\r\n<\/code><\/pre>\n
            \u7ed9\u81ea\u5df1\u5b9a\u98ce\u683c<\/h2>\n
             body<\/span> {<\/span>\r\n   margin<\/span>:<\/span> 0<\/span> auto<\/span>;<\/span>\r\n   padding<\/span>:<\/span> 0<\/span>;<\/span>\r\n   max-width<\/span>:<\/span> 800px<\/span>;<\/span>\r\n   min-height<\/span>:<\/span> 100vh<\/span>;<\/span>\r\n   text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n   margin-bottom<\/span>:<\/span> 15%<\/span>;<\/span>\r\n }<\/span>\r\n .section<\/span> {<\/span>\r\n   margin-bottom<\/span>:<\/span> 15%<\/span>;<\/span>\r\n }<\/span>\r\n button<\/span> {<\/span>\r\n  display<\/span>:<\/span> inline-block<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 32px<\/span>;<\/span>\r\n  width<\/span>:<\/span> 200px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 48px<\/span>;<\/span>\r\n  border-radius<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  margin-right<\/span>:<\/span> 24px<\/span>;<\/span>\r\n  margin-left<\/span>:<\/span> 24px<\/span>;<\/span>\r\n  color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n  background-color<\/span>:<\/span> #66ccff<\/span>;<\/span>\r\n  border<\/span>:<\/span> none<\/span>;<\/span>\r\n  outline<\/span>:<\/span> none<\/span>;<\/span>\r\n  box-shadow<\/span>:<\/span> 4px<\/span> 4px<\/span> #d8d8d8<\/span>;<\/span>\r\n  cursor<\/span>:<\/span> pointer<\/span>;<\/span>\r\n  appearance<\/span>:<\/span> none<\/span>;<\/span>\r\n  transition<\/span>:<\/span> .5s<\/span>;<\/span>\r\n }<\/span>\r\n button<\/span>:active<\/span> {<\/span>\r\n  position<\/span>:<\/span> relative<\/span>;<\/span>\r\n  top<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  left<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  box-shadow<\/span>:<\/span> none<\/span>;<\/span>\r\n }<\/span>\r\n<\/code><\/pre>\n
            \u6240\u6709\u7684\u4eba\u5458\u6216\u4e2a\u4f53<\/h2>\n
            \u8bf7\u60a8\u4e00\u5b9a\u8981\u5728\u60a8\u81ea\u5df1\u7684\u672c\u5730\u73af\u5883\u4e2d\u8fd0\u884c\uff0c\u56e0\u4e3a\u8fd9\u5c06\u662f\u6700\u7ec8\u7684\u6210\u679c\u3002\u60a8\u53ef\u4ee5\u7acb\u5373\u4f7f\u7528\u590d\u5236\u7c98\u8d34\u6765\u4f7f\u7528\u5b83\u3002<\/p>\n
            import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/ScrollButton.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> animateScroll<\/span> as<\/span> scroll<\/span> }<\/span> from<\/span> '<\/span>react-scroll<\/span>'<\/span>;<\/span>\r\n\r\nclass<\/span> ScrollButton<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n\r\n  \/\/ scrollToTop\u306e\u5b9f\u88c5<\/span>\r\n  scrollToTop<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    scroll<\/span>.<\/span>scrollToTop<\/span>();<\/span>\r\n  };<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>React<\/span>.<\/span>Fragment<\/span>><\/span>\r\n        <<\/span>div<\/span> className<\/span>=<\/span>\"text\"<\/span>><\/span>\r\n          <<\/span>h1<\/span>><\/span>Hello React<\/<\/span>h1<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>\"section\"<\/span>><\/span>\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n          <\/<\/span>div<\/span>><\/span>\r\n\r\n          <<\/span>h1<\/span>><\/span>\u3010Section1\u3011What's React<\/<\/span>h1<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>\"section\"<\/span>><\/span>\r\n          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n          <\/<\/span>div<\/span>><\/span>\r\n\r\n          <<\/span>h1<\/span>><\/span>\u3010Section2\u3011react is a JavaScript library created by facebook<\/<\/span>h1<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>\"section\"<\/span>><\/span>\r\n          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n          <\/<\/span>div<\/span>><\/span>\r\n\r\n          <<\/span>h1<\/span>><\/span>\u3010Section3\u3011Build complex UI with react<\/<\/span>h1<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>\"section\"<\/span>><\/span>\r\n          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum doloribus laborum hic dicta odit, ullam quo aperiam tempora, culpa, ipsam consectetur eligendi delectus blanditiis perferendis dolor voluptatum unde molestias numquam!\r\n            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur architecto vero perferendis vel quos incidunt aut numquam recusandae assumenda harum hic iure ipsum consequuntur quasi explicabo, aperiam ea quas eligendi.\r\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione ipsam corrupti culpa repellendus incidunt facere amet minus reprehenderit optio sint? Fuga ad at magnam odit temporibus dolore quod, dignissimos quisquam.\r\n          <\/<\/span>div<\/span>><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n            <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>this<\/span>.<\/span>scrollToTop<\/span>}<\/span>><\/span>Click<\/<\/span>button<\/span>><\/span>\r\n      <\/<\/span>React<\/span>.<\/span>Fragment<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\nexport<\/span> default<\/span> ScrollButton<\/span>;<\/span>\r\n<\/code><\/pre>\n
             body<\/span> {<\/span>\r\n   margin<\/span>:<\/span> 0<\/span> auto<\/span>;<\/span>\r\n   padding<\/span>:<\/span> 0<\/span>;<\/span>\r\n   max-width<\/span>:<\/span> 800px<\/span>;<\/span>\r\n   min-height<\/span>:<\/span> 100vh<\/span>;<\/span>\r\n   text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n   margin-bottom<\/span>:<\/span> 15%<\/span>;<\/span>\r\n }<\/span>\r\n .section<\/span> {<\/span>\r\n   margin-bottom<\/span>:<\/span> 15%<\/span>;<\/span>\r\n }<\/span>\r\n button<\/span> {<\/span>\r\n  display<\/span>:<\/span> inline-block<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 32px<\/span>;<\/span>\r\n  width<\/span>:<\/span> 200px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 48px<\/span>;<\/span>\r\n  border-radius<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  margin-right<\/span>:<\/span> 24px<\/span>;<\/span>\r\n  margin-left<\/span>:<\/span> 24px<\/span>;<\/span>\r\n  color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n  background-color<\/span>:<\/span> #66ccff<\/span>;<\/span>\r\n  border<\/span>:<\/span> none<\/span>;<\/span>\r\n  outline<\/span>:<\/span> none<\/span>;<\/span>\r\n  box-shadow<\/span>:<\/span> 4px<\/span> 4px<\/span> #d8d8d8<\/span>;<\/span>\r\n  cursor<\/span>:<\/span> pointer<\/span>;<\/span>\r\n  appearance<\/span>:<\/span> none<\/span>;<\/span>\r\n  transition<\/span>:<\/span> .5s<\/span>;<\/span>\r\n }<\/span>\r\n button<\/span>:active<\/span> {<\/span>\r\n  position<\/span>:<\/span> relative<\/span>;<\/span>\r\n  top<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  left<\/span>:<\/span> 4px<\/span>;<\/span>\r\n  box-shadow<\/span>:<\/span> none<\/span>;<\/span>\r\n }<\/span>\r\n<\/code><\/pre>\n
            \u7ed3\u675f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
            \u8fd9\u7bc7\u6587\u7ae0\u662f React Advent Calendar 2020 \u7684\u7b2c19\u5929\u7684\u6587\u7ae0\u3002 \u9996\u5148 \u6211\u4eec\u5c06\u4f7f\u7528 rea […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38435","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u7bc7\u6587\u7ae0\u662f React Advent Calendar 2020 \u7684\u7b2c19\u5929\u7684\u6587\u7ae0\u3002 \u9996\u5148 \u6211\u4eec\u5c06\u4f7f\u7528 rea […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-15T08:58:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-28T22:04:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d340537434c4406c6798c\/4-0.gif\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"name\":\"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-02-15T08:58:39+00:00\",\"dateModified\":\"2024-04-28T22:04:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd","og_description":"\u8fd9\u7bc7\u6587\u7ae0\u662f React Advent Calendar 2020 \u7684\u7b2c19\u5929\u7684\u6587\u7ae0\u3002 \u9996\u5148 \u6211\u4eec\u5c06\u4f7f\u7528 rea […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-02-15T08:58:39+00:00","article_modified_time":"2024-04-28T22:04:23+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d340537434c4406c6798c\/4-0.gif"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/","name":"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-02-15T08:58:39+00:00","dateModified":"2024-04-28T22:04:23+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010React\u3011\u4f7f\u7528react-scroll\u63d2\u4ef6\u6765\u5b9e\u73b0\u6eda\u52a8\u6309\u94ae\u529f\u80fd"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e4%bd%bf%e7%94%a8react-scroll%e6%8f%92%e4%bb%b6%e6%9d%a5%e5%ae%9e%e7%8e%b0%e6%bb%9a%e5%8a%a8%e6%8c%89%e9%92%ae%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38435"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38435\/revisions"}],"predecessor-version":[{"id":83493,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38435\/revisions\/83493"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}