滾動到每個頁面上的H2

Question

爲頁面上的每個h2創建scrollTo功能的最佳選擇是什麼？ 這是我的代碼：

 <h2>First Chapter</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu </p> 

<h2>Second Chapter</h2> 
<p>Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempu</p> 

<h2>Third Chapter</h2> 
<p> Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis</p> 
<h2>Fourth Chapter</h2> 
<p>Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit</p> 

我有4個章節（此頁），我想使scrollTo功能，他們每個人的。但是在其他頁面上的任何章節都可以看到。有（在JavaScript或jQuery）任何簡單的功能呢？

謝謝。

Answer 1

我創建了一個jsfiddle

看一看。這可能會幫助你。

$('a[href*=#]:not([href=#])').click(function() { 
 
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
       scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<a href="#1">First</a> <a href="#2">Second</a> <a href="#3">Third</a> <a href="#4">Fourth</a> 
 

 
<h2 id="1">First Chapter</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu</p> 
 

 
<h2 id="2">Second Chapter</h2> 
 

 
<p>Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu</p> 
 

 
<h2 id="3">Third Chapter</h2> 
 

 
<p>Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu</p> 
 

 
<h2 id="4">Fourth Chapter</h2> 
 

 
<p>Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu</p>

Answer 2

HTML

<div id="toc"></div> 
    <h2>First Chapter</h2> 
    <p id=''>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi,orci. Pellentesque nec lorem faucibus, tincidunt massa non, feugiat lacus. Pellentesque purus libero, efficitur ac finibus at, tincidunt vel ligula. Mauris consequat sit amet arcu in mollis. Quisque fermentum imperdiet justo dictum tempus. Curabitur elit tu </p> 

    <h2>Second Chapter</h2> 
    <p>Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempu</p> 

    <h2>Third Chapter</h2> 
    <p> Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis</p> 
    <h2>Fourth Chapter</h2> 
    <p>Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. In</p> 

JS

$('<p/>', { 
    'text': 'Table of contents' 
}).appendTo('#toc'); 
$('<ol />').appendTo('#toc'); 
$('h2').each(
    function(i,el) { 
     var $that = $(el), 
      text = $that.text(), 
      id = text.toLowerCase().replace(/\s+/,'-'); 
     el.id = id; 
     var a = $('<a />', { 
      'href' : '#' + id, 
      'text' : text 
     }), 
      li = $('<li />').append(a).appendTo('#toc ol'); 
    }); 
}); 

Example