Question

我正在建立一个博客，单击链接到文章的链接后，我希望新页面在文章标题上滚动。

我尝试使用<Link to={`/${node.slug}#blog-title`}>{node.title}</Link> 但是它不会滚动到标题，而是滚动回到页面顶部。

我试图在componentDidMount中使用window.scrollTo（document.getElementById（'blog-title）;），但直到那时它似乎都没有被修正，并且仍然显示在顶部。如果使用setTimeout，它只会滚动到顶部立即滚动到正确的ID。

index.js

return (
  <article className="blog-listing" key={node.slug}>
    <div className="entry-meta-content">
      <h2 className="entry-title">
        <Link to={`/${node.slug}`}>{node.title}</Link>
      </h2>
      <span className="entry-meta">
        Created on {node.publishDate} By {node.author.name}
      </span>
    </div>
    <div className="entry-media">
      <Img fluid={node.heroImage.fluid} backgroundColor="#f4f8fb" />
    </div>
    <div className="entry-content-bottom">
      <p className="entry-content">{node.body.childMarkdownRemark.excerpt}</p>
      <Link to={`/${node.slug}`} className="entry-read-more">
        <span />
        Read More
      </Link>
    </div>
  </article>
);

blog-post.js

import React, { Component } from 'react';
import get from 'lodash/get';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import Template from '../components/layout';

class BlogPostTemplate extends Component {
  render() {
    const post = get(this, 'props.data.contentfulBlogPost');
    return (
      <Template>
        <Helmet title={`${post.title}`} id="blog-title" />
        <div className="inner-blog-post">
          <div className="container">
            <div className="row">
              <div className="col-lg-12 col-md-12">
                <div className="entry-media">
                  <Img fluid={post.heroImage.fluid} backgroundColor="#f4f8fb" />
                </div>
                <h1 className="section-headline"> {post.title} </h1>
                <p> {post.publishDate} </p>
                <div
                  dangerouslySetInnerHTML={{
                    __html: post.body.childMarkdownRemark.html
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </Template>
    );
  }
}

export default BlogPostTemplate;

export const pageQuery = graphql`
  query blogPostQuery($slug: String) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      body {
        childMarkdownRemark {
          html
        }
      }
      heroImage {
        file {
          url
        }
        fluid(maxWidth: 1800) {
          ...GatsbyContentfulFluid_withWebp_noBase64
        }
      }
    }
  }
`;

谢谢！

Answer 1

在您的blogpost.js中，您要将一个ID附加到<Helmet>标签上，该标签不会在正文中生成任何内容。也许您应该将其附加到正文中的标题上？

      ...
      <Template>
 -      <Helmet title={`${post.title}`} id="blog-title" />
 +      <Helmet title={`${post.title}`} />
        <div className="inner-blog-post">
          <div className="container">
            <div className="row">
              <div className="col-lg-12 col-md-12">
                <div className="entry-media">
                  <Img fluid={post.heroImage.fluid} backgroundColor="#f4f8fb" />
                </div>
 -              <h1 className="section-headline"> {post.title} </h1>
 +              <h1 id="blog-title" className="section-headline"> {post.title} </h1>
      ...

单击Gatsby.js中的内部链接后如何滚动到ID

1 个答案: