锚标记转到网页的错误部分

时间：2019-12-06 03:41:19

标签： html css anchor href

这是问题所在的实际视频记录（我没有尝试通过任何方式做广告）：https://www.youtube.com/watch?v=7b38cQ0VGWI

因此，我出于练习的目的创建了一个网站，并且一切进展顺利，直到遇到这个问题。我有2个<nav>菜单，其中顶部导航栏将其中一个引导到另一页，而第二导航条将其中一个引导至同一页面中的某个部分。 >。但是我在第二个导航栏上遇到了问题。所以下面是我正在使用的html：

<nav class="navbar">
        <div class="container">
            <ul>
                <li><a href="#drama">Drama</a></li>
                <li><a href="#comedy">Comedy</a></li>
                <li><a href="#romance">Romance</a></li>
                <li><a href="#action">Action</a></li>
            </ul>
        </div>
    </nav>

这是一系列的电影图片列表，但我仅以下面的输入2为例：

<div class="grid-picture">
    <!--First row of movies-->
        <div id="action">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg">
                    <h3>John Wick</h3>
                        <p>Action, Crime, Triller</p>
                </a>
            </div>
        </div>
<br>
        <!--1st row of romance movies-->
        <div id="romance">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>
       </div>
</div>

如您所见，“ John Wick”位于div标签中，ID为“ action”，而“ Love，Rosie”位于div标签中，ID为“ romance”。现在，“动作”链接可以正常工作；它将页面准确地定向到“动作” ID中的电影所在的位置。但是，当我单击“浪漫”链接时，它并没有带我进入网站底部。相反，它会将我带到与单击“操作”链接相同的位置。

因此，基本上，即使我确保输入href="#romance"，并且确保将影片“ Love，Rosie”包裹在ID为“浪漫”。外部链接可以正常工作，只是内部链接不能像我想象的那样工作。我还检查了四张是否有未封闭的div标签，但这不是原来的四倍。

所有电影都在同一页面上。

下面是CSS（对不起，组织混乱，目前仍在处理）：

body {
    margin: 0;
    line-height: 1.6em;
    font-size: 16px;
    font-family: sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    overflow:hidden;
}

nav {
    margin: 0;
    color: #E52EAE;
    z-index: 1;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
}

nav a{
    text-decoration: none;
    color: white;
    padding-right: 18px;
    padding-bottom: 5px;
    text-align: center;
    float: right;
}

.navbar {
    margin-right: 227px;
    position: relative;
    font-size: 30px;
    color: #22D8E5;
}

.navbar a:visited {
    color: #22D8E5;
}

.navbar a:hover {
    color: red;
}

#showcase {
    background-image:url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
    background-position: center right;
    background-color: black;
    background-size: 850px;
    background-position: left;
    height: 300px;
    text-align: center;
    color: white;
}

.movies {
    box-sizing: border-box;
    width: 25%;
    float: left;
    padding: 1px;
}

.movies img {
    height: 500px;
    width: 100%;
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    color: coral;
}

a:hover {
    color: red;
}

这是整个html：

<!DOCTYPE html>
<html>
<head>
<title>My Video Library</title>
<link rel="stylesheet" type="text/css" href="movies.css">
</head>
<body>

<section id="showcase">
    <nav id="main-nav">
        <div class="container">
            <ul>
                <li><a href="#">Etc</a></li>
                <li><a href="#">Animation</a></li>
                <li><a href="#">LaughTime</a></li>
                <li><a href="movies.index.html">Movies</a></li>
                <li><a href="practice3.index.html">Home</a></li>
            </ul>
        </div>
    </nav>
        <div class="container">
            <h1>Movie List</h1>

    <nav class="navbar">
        <div class="container">
            <ul>
                <li><a href="#drama">Drama</a></li>
                <li><a href="#comedy">Comedy</a></li>
                <li><a href="#romance">Romance</a></li>
                <li><a href="#action">Action</a></li>
            </ul>
        </div>
    </nav>
        </div>
</section>


<div class="grid-picture">
    <!--First row of movies-->
        <div id="action">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
                    <h3>John Wick</h3>
                        <p>Action, Crime, Triller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2802144/" target="_blank">
                <img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
                    <h3>Kingsmen</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2381249/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
                    <h3>Mission Impossible: Rogue Nation</h3>
                        <p>Action, Adventure, Thriller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0468569/" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
                    <h3>The Dark Knight</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>

        <br>
        <!--2nd row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1431045/" target="_blank">
                <img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
                    <h3>Deadpool</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt3315342/" target="_blank">
                <img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
                    <h3>Logan</h3>
                        <p>Action, Drama, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt6806448/" target="_blank">
                <img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
                    <h3>Fast & Furious: Hobbs & Shaw</h3>
                        <p>Action, Adventure</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0371746/" target="_blank">
                <img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
                    <h3>Iron Man</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>


        <br>
        <!--3rd row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt3501632/" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
                    <h3>Thor: Ragnarok</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1631867/" target="_blank">
                <img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
                    <h3>Edge of Tomorrow</h3>
                        <p>Action, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
                    <h3>Non-Stop</h3>
                        <p>Action, Thriller, Mystery</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
                    <h3>Taken</h3>
                        <p>Action, Thriller</p>
                </a>
            </div>


        <br>
        <!--4th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
                    <h3>Avengers: Infinity War</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
                    <h3>Avengers: Endgame</h3>
                        <p>Action, Adventure, Drama</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
                <img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
                    <h3>John Wick 3: Chapter 3 - Parabellum</h3>
                        <p>Action, Crime, Thriller</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
                    <h3>Venom</h3>
                        <p>Action, Sci-Fi, Thriller</p>
                </a>
            </div>


        <br>
        <!--5th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
                    <h3>Guardians of the Galaxy</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
                <img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
                    <h3>Captain America: Civil War</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
                <img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
                    <h3>Spiderman</h3>
                        <p>Action, Adventure, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
                <img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
                    <h3>Mission Impossible: Fallout</h3>
                        <p>Action, Adventure, Thriller</p>
                </a>
            </div>


        <br>
        <!--6th row of movies-->
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
                <img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
                    <h3>The Maze Runner</h3>
                        <p>Action, Mystery, Sci-Fi</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
                <img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
                    <h3>Ant-Man and the Wasp</h3>
                        <p>Action, Adventure, Comedy</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
                <img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
                    <h3>범죄와의 전</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
                <img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
                    <h3>신세계</h3>
                        <p>Action, Crime, Drama</p>
                </a>
            </div>
        </div>


        <br>
        <!--1st row of romance movies-->
        <div id="romance">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
                    <h3>About Time</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
                    <h3>The Proposal</h3>
                        <p>Comedy, Drama, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1129423/">
                <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
                    <h3>Fireproof</h3>
                        <p>Drama, Romance</p>
                </a>
            </div>
        </div>

        <br>
        <!--1st row of comedy movies-->
        <div id="comedy">
            <div class="movies">
                <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
                <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
                    <h3>Love, Rosie</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
                    <h3>About Time</h3>
                        <p>Comedy, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
                <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
                    <h3>The Proposal</h3>
                        <p>Comedy, Drama, Romance</p>
                </a>
            </div>

            <div class="movies">
                <a href="https://www.imdb.com/title/tt1129423/">
                <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
                    <h3>Fireproof</h3>
                        <p>Drama, Romance</p>
                </a>
            </div>
        </div>




</div>

</body>
</html>

3 个答案:

答案 0 :(得分：1)

下面是您提供的代码的有效示例。更改为：

  • 将position:relative;添加到.movies CSS类
  • 将.grid-picture { position:relative; float:left; }添加到CSS
  • 在每个电影类别关闭<br style="clear:both;"/>标签之前添加了</div>，以确保div调整大小以匹配其内容的高度（老把戏）

注意：我也整理了一下您的代码。您可以运行下面的示例进行测试。

body {
  margin: 0;
  line-height: 1.6em;
  font-size: 16px;
  font-family: sans-serif;

}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  margin: 0;
  color: #E52EAE;
  z-index: 1;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
}

nav a{
  text-decoration: none;
  color: white;
  padding-right: 18px;
  padding-bottom: 5px;
  text-align: center;
  float: right;
}

.navbar {
  margin-right: 227px;
  position: relative;
  font-size: 30px;
  color: #22D8E5;
}

.navbar a:visited {
  color: #22D8E5;
}

.navbar a:hover {
  color: red;
}

#showcase {
  background-image: url('http://getwallpapers.com/wallpaper/full/c/4/8/1367231-beautiful-black-cool-background-1920x1200-for-windows-7.jpg');
  background-position: center right;
  background-color: black;
  background-size: 850px;
  background-position: left;
  height: 300px;
  text-align: center;
  color: white;
}

.movies {
  position:relative;
  float:left;
  box-sizing: border-box;
  width: 25%;
  padding: 1px;
}

.movies img {
  height: 500px;
  width: 100%;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  color: coral;
}

a:hover {
  color: red;
}

.grid-picture {
  position:relative;
  float:left;
}
<!DOCTYPE html>
<html>
<head>
  <title>My Video Library</title>
  <link rel="stylesheet" type="text/css" href="movies.css">
</head>

<body>
  <section id="showcase">
    <nav id="main-nav">
      <div class="container">
        <ul>
          <li><a href="#">Etc</a></li>
          <li><a href="#">Animation</a></li>
          <li><a href="#">LaughTime</a></li>
          <li><a href="movies.index.html">Movies</a></li>
          <li><a href="practice3.index.html">Home</a></li>
        </ul>
      </div>
    </nav>
    
    <div class="container">
      <h1>Movie List</h1>

      <nav class="navbar">
        <div class="container">
          <ul>
            <li><a href="#drama">Drama</a></li>
            <li><a href="#comedy">Comedy</a></li>
            <li><a href="#romance">Romance</a></li>
            <li><a href="#action">Action</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </section>


  <div class="grid-picture">
    <!--First row of movies-->
    <div id="action">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt2911666/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91atCmxi6hL._UR1200,1600_RI_.jpg" alt="john wick">
          <h3>John Wick</h3>
          <p>Action, Crime, Triller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2802144/" target="_blank">
          <img src="https://cdn.collider.com/wp-content/uploads/2015/02/kingsman-the-secret-service-final-poster.jpg">
          <h3>Kingsmen</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2381249/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/81wcVvqV8pL._RI_.jpg">
          <h3>Mission Impossible: Rogue Nation</h3>
          <p>Action, Adventure, Thriller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0468569/" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91KkWf50SoL._SL1500_.jpg">
          <h3>The Dark Knight</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>

      <br>
      <!--2nd row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1431045/" target="_blank">
          <img src="https://pics.filmaffinity.com/Deadpool-834516798-large.jpg">
          <h3>Deadpool</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt3315342/" target="_blank">
          <img src="https://vignette.wikia.nocookie.net/xmenmovies/images/2/22/Logan-Poster-5.jpg/revision/latest?cb=20170131012906">
          <h3>Logan</h3>
          <p>Action, Drama, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt6806448/" target="_blank">
          <img src="https://musicart.xboxlive.com/7/e9225100-0000-0000-0000-000000000002/504/image.jpg?w=1920&h=1080">
          <h3>Fast & Furious: Hobbs & Shaw</h3>
          <p>Action, Adventure</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0371746/" target="_blank">
          <img src="https://cdn.collider.com/wp-content/uploads/2015/04/iron-man-1-poster.jpg">
          <h3>Iron Man</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>


      <br>
      <!--3rd row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt3501632/" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMjMyNDkzMzI1OF5BMl5BanBnXkFtZTgwODcxODg5MjI@._V1_.jpg">
          <h3>Thor: Ragnarok</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1631867/" target="_blank">
          <img src="http://collider.com/wp-content/uploads/edge-of-tomorrow-poster3.jpg">
          <h3>Edge of Tomorrow</h3>
          <p>Action, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2024469/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BOTI3NzcxMjkzMl5BMl5BanBnXkFtZTgwMDY0NTQ0MDE@._V1_.jpg">
          <h3>Non-Stop</h3>
          <p>Action, Thriller, Mystery</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0936501/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91gANPtj-7L._SL1500_.jpg">
          <h3>Taken</h3>
          <p>Action, Thriller</p>
        </a>
      </div>


      <br>
      <!--4th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt4154756/?ref_=nv_sr_srsg_3" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMjMxNjY2MDU1OV5BMl5BanBnXkFtZTgwNzY1MTUwNTM@._V1_.jpg">
          <h3>Avengers: Infinity War</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt4154796/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg">
          <h3>Avengers: Endgame</h3>
          <p>Action, Adventure, Drama</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt6146586/?ref_=nv_sr_srsg_0" target="_blank">
          <img src="https://i.pinimg.com/originals/1b/03/a1/1b03a1a68c4616f8fb203d00a2849a9a.jpg">
          <h3>John Wick 3: Chapter 3 - Parabellum</h3>
          <p>Action, Crime, Thriller</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1270797/?ref_=nv_sr_srsg_0">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91ZwG8Ytb3L._RI_.jpg">
          <h3>Venom</h3>
          <p>Action, Sci-Fi, Thriller</p>
        </a>
      </div>


      <br>
      <!--5th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt2015381/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTAwMjU5OTgxNjZeQTJeQWpwZ15BbWU4MDUxNDYxODEx._V1_.jpg">
          <h3>Guardians of the Galaxy</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt3498820/?ref_=nv_sr_srsg_6">
          <img src="https://m.media-amazon.com/images/M/MV5BMjQ0MTgyNjAxMV5BMl5BanBnXkFtZTgwNjUzMDkyODE@._V1_.jpg">
          <h3>Captain America: Civil War</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt0145487/?ref_=nv_sr_srsg_7">
          <img src="https://images-na.ssl-images-amazon.com/images/I/71moJUZkLwL._SL1285_.jpg">
          <h3>Spiderman</h3>
          <p>Action, Adventure, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt4912910/?ref_=nv_sr_srsg_0">
          <img src="https://cdn.collider.com/wp-content/uploads/2018/05/mission-impossible-fallout-poster-tom-cruise.jpg">
          <h3>Mission Impossible: Fallout</h3>
          <p>Action, Adventure, Thriller</p>
        </a>
      </div>


      <br>
      <!--6th row of movies-->
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1790864/?ref_=nv_sr_srsg_3">
          <img src="https://images-na.ssl-images-amazon.com/images/I/91mPBc21TcL._RI_.jpg">
          <h3>The Maze Runner</h3>
          <p>Action, Mystery, Sci-Fi</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt5095030/?ref_=nv_sr_srsg_3">
          <img src="https://images-na.ssl-images-amazon.com/images/I/A1CGAvzql5L._SL1500_.jpg">
          <h3>Ant-Man and the Wasp</h3>
          <p>Action, Adventure, Comedy</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2082221/?ref_=nv_sr_srsg_0">
          <img src="http://mblogthumb1.phinf.naver.net/MjAxODAxMTNfMjk2/MDAxNTE1NzcyNTg1MTc0.NeCkyOl-gJwl4ksYNeAmYSHCHg9iRVLpCh0Qy4zFR1Ag.MfdAtUo9Efw0rx_8zKgkzAAj1azlUfm-ov3qgDuLRbUg.JPEG.zzid2/movie_image.jpg?type=w800">
          <h3>범죄와의 전</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2625030/?ref_=nv_sr_srsg_6">
          <img src="http://mblogthumb4.phinf.naver.net/20130506_151/refine9_136781657095534Gd5_JPEG/movie_image.jpg?type=w2">
          <h3>신세계</h3>
          <p>Action, Crime, Drama</p>
        </a>
      </div>
      <br style="clear:both;" />
    </div>


    <br>
    <!--1st row of romance movies-->
    <div id="romance">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
          <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
          <h3>Love, Rosie</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
          <h3>About Time</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
          <h3>The Proposal</h3>
          <p>Comedy, Drama, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1129423/">
          <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
          <h3>Fireproof</h3>
          <p>Drama, Romance</p>
        </a>
      </div>
    </div>

    <br>
    <!--1st row of comedy movies-->
    <div id="comedy">
      <div class="movies">
        <a href="https://www.imdb.com/title/tt1638002/?ref_=nv_sr_srsg_0">
          <img src="https://kbimages1-a.akamaihd.net/beb95aaa-36b7-444d-8557-0cb7efa8e898/1200/1200/False/love-rosie-1.jpg">
          <h3>Love, Rosie</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt2194499/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BMTA1ODUzMDA3NzFeQTJeQWpwZ15BbWU3MDgxMTYxNTk@._V1_.jpg">
          <h3>About Time</h3>
          <p>Comedy, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1041829/?ref_=nv_sr_srsg_0">
          <img src="https://m.media-amazon.com/images/M/MV5BOGM5YTNiYzktNmEwZC00ZjE5LWIyNzEtOTUwNDE0NmVkYzE3XkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_.jpg">
          <h3>The Proposal</h3>
          <p>Comedy, Drama, Romance</p>
        </a>
      </div>

      <div class="movies">
        <a href="https://www.imdb.com/title/tt1129423/">
          <img src="https://m.media-amazon.com/images/M/MV5BMGZhYzFjY2ItNDVmZi00Y2Q1LWFmMDgtMzAwYTU3NTI3ZGU4XkEyXkFqcGdeQXVyMTMxMTY0OTQ@._V1_.jpg">
          <h3>Fireproof</h3>
          <p>Drama, Romance</p>
        </a>
      </div>
      <br style="clear:both;" />
    </div>
  </div>
</body>
</html>

答案 1 :(得分：0)

指向锚点的链接只会滚动页面，因此，如果在页面底部设置指向锚点的链接，则网站只能滚动到其内容的末尾。 这可能是您在这里遇到的问题。如果您设置了 .grid-picture容器具有巨大的价值，可以使页面滚动超出实际内容的高度。

答案 2 :(得分：-2)

我认为您正在寻找这个gallery filter 

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}


// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}
<!-- MAIN (Center website) -->
<div class="main">

<h1>MYLOGO.COM</h1>
<hr>

<h2>PORTFOLIO</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('nature')"> Nature</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('people')"> People</button>
</div>

<!-- Portfolio Gallery Grid -->
<div class="row">
  <div class="column nature">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Mountains" style="width:100%">
      <h4>Mountains</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
      <h4>Lights</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column nature">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
      <h4>Forest</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  
  <div class="column cars">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/cars1.jpg" alt="Car" style="width:100%">
      <h4>Retro</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/cars2.jpg" alt="Car" style="width:100%">
      <h4>Fast</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column cars">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/cars3.jpg" alt="Car" style="width:100%">
      <h4>Classic</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>

  <div class="column people">
    <div class="content">
      <img src="https://www.w3schools.com/w3images/people1.jpg" alt="Car" style="width:100%">
      <h4>Girl</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/people2.jpg" alt="Car" style="width:100%">
      <h4>Man</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
  <div class="column people">
    <div class="content">
    <img src="https://www.w3schools.com/w3images/people3.jpg" alt="Car" style="width:100%">
      <h4>Woman</h4>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
<!-- END GRID -->
</div>

<!-- END MAIN -->
</div>

相关问题
最新问题