Jquery 在多个超链接上滚动

Question

我目前正在开发单页网站，我选择固定页眉和页脚，但在使用超链接主题标签时遇到了一些麻烦。我有 4 个链接到我页面的 4 个部分，

我想在中间显示内容，这样我可以避免一些数据被页眉和页脚隐藏。

我找到了这段代码：

jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
    });
});

我无法让它在我自己的网站上运行。

我输入了id

<a name="timeline" class="anchor_title"><center><h1>Our progress</h1></center></a>

<a name="map" class="anchor_title"><center><h1>Our gathering Data</h1></center></a>

有没有人能解释一下我如何捕捉每个超链接的名称并将其放在 jquery 代码中。

Answer 1

您找到的脚本必须使我们具有 href 属性：

<a href="#timeline" class="anchor_title"><center><h1>Our progress</h1></center></a>

<a href="#map" class="anchor_title"><center><h1>Our gathering Data</h1></center></a>

在 HTML 中，这些链接指向具有相同 ID 的元素：

<div id="timeline"></div>
<div id="map"></div>

在脚本中，class 必须匹配链接的选择器：

$(document).ready(function() {

$('.anchor_title').click(function(event) {     
event.preventDefault();
var offset = $(this.hash).offset().top-$('#header').height();
$('html, body').stop().animate({scrollTop: offset}, 500);
});
});

请注意（固定的）header 的高度是如何从它应该滚动到的位置减去的，否则它最终会在它下面（在屏幕顶部）而不是正下方。

编辑 - 这是一个基本示例：

http://codepen.io/anon/pen/bNZzNq

对此有几点需要注意：

为了防止动画堆积，已将 stop() 方法添加到函数中。

页面上的第一个元素需要顶部填充（或者 :before 伪元素），其数量与 header 的高度相同，以使其相对于固定位置正确放置位置。

示例标记中使用了特殊 HTML5 个元素 header 和 section。文档本身需要正确的声明：<!DOCTYPE html>。对于任何其他类型的声明，必须将元素转换为定义了 class 的 div :

<section id="first"></section>

section {height: 70vh}

会变成（连同 CSS 的变化）：

<div id="first" class="section"></div>

.section {height: 70vh}

希望能解决问题，但如果需要任何其他调整，请告诉我。

新编辑 - HTML5 个元素也会对脚本中的选择器产生一些影响！

$('#header').height()

$('header').height()

Jquery 在多个超链接上滚动

Jquery scrolling on multiple hyperlink

html

css

jquery

hyperlink