Question

好的，我正在尝试做几件事：

创建一个包含id和基础

段落
的列表
将在DOM中找到的文本分配给每个列表段落

为DOM
的某些h2段落分配ID
使用该ID自动向下滚动页面（是的，我知道这可以通过多种方式完成）

但是，我遇到了一个问题，我现在已经坚持了3个小时。每当我做步骤nr。 3我的页面会自动向下滚动。是的，我知道可以让页面向上滚动，但这是我想避免的不必要的代码。

GIF：http://im.ezgif.com/tmp/ezgif-1640909552.gif

这是我的代码

JS

    window.onload = function () {

        $("<ul id='list'> <li></li> <li></li> <li></li> <li></li> </ul>").insertAfter(".content h1");

        for(i = 1; i <= 4; i++) {
            $("#list li:nth-child("+i+")").html("<a>" + $(".content h2:nth-of-type(" +i+ ")").text() + "</a>");
            $(".content h2:nth-of-type("+i+")").attr("id", "h2nr"+i); //this little sh#t makes my page scroll down >:(
            $("#list li:nth-of-type("+i+") a").attr("href", "#h2nr"+i);
            }
}; //end of ONLOAD

HTML

此页面仅用于培训，不适用于任何人商业用途，因此可能有一些缺点;

    <!DOCTYPE html>
<html>
<head>
<title>Specials | The Landon Hotel</title>
<link rel="stylesheet" href="style/style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="challenge.js"></script>
</head>
<body>
    <div class="container">
        <div class="header"><img src="img/header.png"></div>
        <div id="hero">
            <div class="current"><img src="img/HomePageImages/Paris.jpg"></div>
        </div>

<nav class="main-navigation" role="navigation">
<div>
<ul id="menu-main-menu" class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="restaurant-to-room-service.html">Room Service</a></li>
<li><a href="specials.html">Specials</a></li>
<li><a href="reservations.html">Reservations</a></li>
<li><a href="meetings-events.html">Meetings &#038; Events</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>
</nav>

        <div class="content">   
        <h1>Specials</h1>   
        <h2>San Francisco, Bernal Heights</h2>
        <h3>Military Family Deal:</h3>
        <p>Active and retired military, and their families, save 20% when booking a three or more day stay at the Landon Hotel in lovely Bernal Heights, San Francisco. Book by August 1st, 2015.</p> 
        <h3>Bring Fido:</h3>
        <p>Bring your travel-loving canine to our pet-friendly Bernal Heights Landon Hotel, and see why San Francisco is a dog's paradise, with endless activities and locations that cater to canines. You'll save 10% just for bringing Fido, and there are no hidden pet fees. Book by April 30th, 2014.</p> 
        <h3>Meeting Mondays:</h3>
        <p>The new Bernal Heights conference room is just the place for your corporate meetings, and if you book for three or more consecutive days, that include a Monday, you'll receive Monday free. Book by September 15th, 2014.</p>
<hr/>
        <h2>London, West End</h2>
        <h3>Theatre Package:</h3>
        <p>Theatre lovers can enjoy two free tickets to a West End theater production of their choice, when booking a weekend stay at the West End Landon.  Tickets are mezzanine level and are limited to available productions at the time of booking. Book by August 1st, 2015.</p>
        <h3>Shopper's Paradise:</h3>
        <p>Oxford, Regent, and Bond Streets have some of the best shopping in the world, and all are just a tube stop away when you stay at the West End Landon. And, if you book a minimum of five days, you'll get a bonus gift certificate worth $125 to use in the boutique of your choice, based on participating vendors at time of booking. Book by November 2015.</p>
<hr/>       
        <h2>Hong Kong, Kwun Tong</h2>
        <h3>Spa Holiday:</h3>
        <p>The Hong Kong is home to a half-dozen world-renowned spas, some tucked away in skyscrapers, others in beachside retreats. You can have your pick of a one-day Spa Holiday if you book a five-consecutive night stay during the months of February through April. Book by November 1, 2014.</p>
        <h3>Leisure and Luxury:</h3>
        <p>Stay at the Landon Hotel in the Kwun Tong District and you'll have both leisure and luxury at your fingertips. Play a complimentary round of golf and enjoy a complimentary seaweed body wrap and massage, if you book a weekend stay by August 1st , 2015.</p> 
<hr/>
        <h2>Paris, Latin Quarter</h2>
        <h3>Sweet Deal:</h3>
        <p>Paris is renowned for its delectable pastries and other dessert creations by the most highly skilled chefs in the world. If you book a weekend stay by February 28th, 2015 you'll receive a complimentary dessert tray every night of your stay. Be prepared for a sweet feast!</p>
        <h3>Spiritual Walk:</h3>
        <p>The Latin Quarter is the place to tour some of the world's oldest churches and monasteries. You can enjoy a complimentary church walking tour for two, guided by an entertaining and enlightening guide, if you book a weekend stay by March 1, 2015.</p>
        <h3>Holiday Package:</h3>
        <p>Spend the winter holidays in Paris and enjoy festivity and fine food under a star-filled winter sky. You'll receive 15% off your hotel accommodations, if you reserve for 7 consecutive nights in December 2014 or January 2015.  Book by October 30th, 2014.</p>
<hr/>
    </div>
</body>
</html>

Answer 1

我修改了Javascript以执行您想要的操作。我使用了每个函数，因此它会自动选择所有H2元素并在之后构建列表以进行滚动。您还可以使用jquery的滚动插件使其平滑滚动。

window.onload = function() {
    var items = $('.content h2');
    var list = $('<ul id="list"></ul>');
    items.each(function(i, el) {
      var e = $(el);
      var a = $('<a name="h2nr' + i + '"></a>'),
        listA = $('<a href="#h2nr' + i + '">' + e.html() + '</a>');
      e.append(a);
      var li = $('<li></li>');
      li.append(listA);
      list.append(li);
    });

    list.insertBefore('.content');

    var loc = location.href;
    if (loc.indexOf('#') > -1) {
      loc = loc.substring(0, loc.indexOf('#'));
      }
    loc+="#";//Scroll to top...
     location.href = loc;
      
    }; //end of ONLOAD

<!DOCTYPE html>
<html>

<head>
  <title>Specials | The Landon Hotel</title>
  <link rel="stylesheet" href="style/style.css">
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="challenge.js"></script>
</head>

<body>
  <div class="container">
    <div class="header">
      <img src="img/header.png">
    </div>
    <div id="hero">
      <div class="current">
        <img src="img/HomePageImages/Paris.jpg">
      </div>
    </div>

    <nav class="main-navigation" role="navigation">
      <div>
        <ul id="menu-main-menu" class="nav-menu">
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="restaurant-to-room-service.html">Room Service</a>
          </li>
          <li><a href="specials.html">Specials</a>
          </li>
          <li><a href="reservations.html">Reservations</a>
          </li>
          <li><a href="meetings-events.html">Meetings &#038; Events</a>
          </li>
          <li><a href="news.html">News</a>
          </li>
          <li><a href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="content">
      <h1>Specials</h1> 
      <h2>San Francisco, Bernal Heights</h2>
      <h3>Military Family Deal:</h3>
      <p>Active and retired military, and their families, save 20% when booking a three or more day stay at the Landon Hotel in lovely Bernal Heights, San Francisco. Book by August 1st, 2015.</p>
      <h3>Bring Fido:</h3>
      <p>Bring your travel-loving canine to our pet-friendly Bernal Heights Landon Hotel, and see why San Francisco is a dog's paradise, with endless activities and locations that cater to canines. You'll save 10% just for bringing Fido, and there are no
        hidden pet fees. Book by April 30th, 2014.</p>
      <h3>Meeting Mondays:</h3>
      <p>The new Bernal Heights conference room is just the place for your corporate meetings, and if you book for three or more consecutive days, that include a Monday, you'll receive Monday free. Book by September 15th, 2014.</p>
      <hr/>
      <h2>London, West End</h2>
      <h3>Theatre Package:</h3>
      <p>Theatre lovers can enjoy two free tickets to a West End theater production of their choice, when booking a weekend stay at the West End Landon. Tickets are mezzanine level and are limited to available productions at the time of booking. Book by
        August 1st, 2015.</p>
      <h3>Shopper's Paradise:</h3>
      <p>Oxford, Regent, and Bond Streets have some of the best shopping in the world, and all are just a tube stop away when you stay at the West End Landon. And, if you book a minimum of five days, you'll get a bonus gift certificate worth $125 to use
        in the boutique of your choice, based on participating vendors at time of booking. Book by November 2015.</p>
      <hr/>
      <h2>Hong Kong, Kwun Tong</h2>
      <h3>Spa Holiday:</h3>
      <p>The Hong Kong is home to a half-dozen world-renowned spas, some tucked away in skyscrapers, others in beachside retreats. You can have your pick of a one-day Spa Holiday if you book a five-consecutive night stay during the months of February through
        April. Book by November 1, 2014.</p>
      <h3>Leisure and Luxury:</h3>
      <p>Stay at the Landon Hotel in the Kwun Tong District and you'll have both leisure and luxury at your fingertips. Play a complimentary round of golf and enjoy a complimentary seaweed body wrap and massage, if you book a weekend stay by August 1st ,
        2015.
      </p>
      <hr/>
      <h2>Paris, Latin Quarter</h2>
      <h3>Sweet Deal:</h3>
      <p>Paris is renowned for its delectable pastries and other dessert creations by the most highly skilled chefs in the world. If you book a weekend stay by February 28th, 2015 you'll receive a complimentary dessert tray every night of your stay. Be prepared
        for a sweet feast!</p>
      <h3>Spiritual Walk:</h3>
      <p>The Latin Quarter is the place to tour some of the world's oldest churches and monasteries. You can enjoy a complimentary church walking tour for two, guided by an entertaining and enlightening guide, if you book a weekend stay by March 1, 2015.</p>
      <h3>Holiday Package:</h3>
      <p>Spend the winter holidays in Paris and enjoy festivity and fine food under a star-filled winter sky. You'll receive 15% off your hotel accommodations, if you reserve for 7 consecutive nights in December 2014 or January 2015. Book by October 30th,
        2014.
      </p>
      <hr/>
    </div>
</body>

</html>

简单而又难：Jquery和滚动

1 个答案: