通过数据属性滚动到 div 不起作用

Question

我正在尝试创建一个通过data-id在div上滚动的程序。我将我的数据 id 放在我的菜单上，并尝试将它们滚动到各自的 iddiv 上。

这是我的HTML外观：

<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials"  href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>

<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>

以下是我选择数据属性的方式，以便它们可以在每个div上平滑滚动：

<script>
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
</script>

不知何故，这不起作用。我想知道如何解决这个问题，以便每个数据 id 都可以滚动到每个div？

Answer 1

代码片段中的data_id是一个未定义的var，除此之外，一切看起来都不错，并且还可以工作。

function scrollToData(data_id){
$('html, body').animate({
scrollTop: $('#' + data_id).offset().top
}, 'slow');
}
scrollToData("about")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br> contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy
for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br> I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br> look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>

Answer 2

您可以使用滚动行为：smooth;css 属性来实现此目的。

html{
scroll-behavior: smooth;
}

您可以将此行为设置为任何滚动容器。默认情况下，它是<html>文档的根目录。

您需要在链接中使用元素的 id，例如href="#id"

html {scroll-behavior: smooth;}
div {
height: 500px;
border: solid 1px red;
margin: 20px;
}

<ul>
<li><a href="#last">go to last</a></li>
</ul>
<section>
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</section>

---

但是，如果您希望在单击时工作，则必须将事件绑定到相对元素。

function goToElement(data_id){
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
}

然后，您必须将事件绑定到nav-link元素。

$('.nav-link').on('click', function(){
goToElement($(this).data('id'));
});

Answer 3

尝试以下代码

$(".nav-link").click(function(){

var topData= $( '#' + $(this).attr("data-id")).offset();

$('html, body').animate({
scrollTop: topData.top
}, 'slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials"  href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>