滚动到每个页面上的 H2

Scroll To H2 on every page

本文关键字：H2 滚动      更新时间：2023-09-26

为页面上的每个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中）是否有任何简单的功能？

谢谢。

我创建了一个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>

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

例

相关文章：