好吧，所以我正在尝试做几件事：
- 创建具有ID和基础的列表
- 段落
- 将在DOM中找到的文本分配给每个列表段落
- 为DOM的某些h2段落分配一个ID
- 使用该ID自动向下滚动页面（是的，我知道这可以通过许多不同的方式完成）
但是，我遇到了一个问题，我已经坚持了三个小时。每当我执行步骤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 & 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>
我修改了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 & 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句