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函数。但在10页的其他页面上将有任何章节。有（在Javascript或jQuery中）任何简单的函数吗？

感谢。

Answer 1

我创建了jsfiddle

看一看。这可能会对你有所帮助。

＆＃13;

 $('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;
         }
     }
 });

＆＃13;

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

＆＃13;

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

在每页上滚动到H2

2 个答案: