1. 技术文章
  2. Anchor tag goes to the wrong section of a web page

Anchor tag goes to the wrong section of a web page

由 北慕城南 提交于 2020-01-23 12:34:57

问题


Here's an actual video recording of what the problem is (I'm not trying to advertise in any way): https://www.youtube.com/watch?v=7b38cQ0VGWI

So I'm creating a website just for practice's sake, and everything was going smoothly until I ran into this problem. I have 2 <nav> menus, where the top main nav bar leads one to another page, while the 2nd nav bar leads one to a certain section within the same page. But I'm having problems with the 2nd nav bar. So below is the html I'm using:

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

After this is a series of movie picture lists but I'm only going input 2 below as an example:

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

As you can see, "John Wick" is within a div tag with an ID of "action", while "Love, Rosie" is within a div tag with an ID of "romance." Now, the "Action" link works fine; it directs the page exactly where the movies within the ID of "action" are. However, when I click the "Romance" link, it doesn't take me to the bottom of the website. Rather, it takes me to the same place as if I clicked the "Action" link.

So basically, the anchor tag isn't working for me even though I made sure to input href="#romance" and also made sure to wrap around the movie "Love, Rosie" within a div tag with an ID of "romance". External links work just fine, only that internal links aren't working as I assumed it would. I also quadruple checked if I had any unclosed div tags, but that wasn't the case.

All of the movies are in the same page.

Below is the CSS (sorry for the disorganization, still working on that):

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

And here's the whole 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>

回答1:


Below is a working example of the code you provided. The changes are:

  • added position:relative; to .movies CSS class
  • added .grid-picture { position:relative; float:left; } to the CSS
  • added <br style="clear:both;"/> right before each movie category closing </div> tag in order to make sure that the div resizes to match the height of its content (old trick)

Note: I also tidied up your code a bit. You can run the example below to test it.

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>



回答2:


A link to an anchor only scrolls the page, so if you set a link to an anchor at the bottom of the page the site cannot scroll further than until it reaches the end of its content. This could be your issue here. You can easily test this if you set the height of the .grid-picture container to a huge value to make the page scroll beyound the height of the actual content.




回答3:


I think you are looking for this 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>


来源：https://stackoverflow.com/questions/59206542/anchor-tag-goes-to-the-wrong-section-of-a-web-page

标签
html
css
anchor
href
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!