我想用jquery动画跳一个div点击,我写了一个简单的基本函数,但它不起作用,我找不到我的错误?我的错误在哪里?
我的a[href]和我的id值相同
$(document).on("click", ".tur-programi li a", function(e) {
var getAhrefs = $(this).attr("href");
$('html, body').animate({
scrollTop: $("div#getAhrefs").offset().top
}, 2000);
e.preventDefault();
});
<ul class="tur-programi">
<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
<li><a href="#section4">Section4</a></li>
</ul>
<div id="section1">
<h1>SECTION 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section2">
<h2>SECTION 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section3">
<h3>SECTION 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<div id="section4">
<h4>SECTION 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione recusandae facere, autem iure commodi eos laboriosam corporis sit molestias enim. Eaque dolore veritatis facere nostrum! Repellendus aspernatur aliquid laudantium, cum illum molestias
blanditiis enim neque excepturi necessitatibus, vel minus quam, illo doloremque quibusdam. Repudiandae totam, ullam placeat reprehenderit harum nostrum natus ducimus laboriosam quia architecto, illo iste nemo amet quibusdam eius provident cum, ea
pariatur accusantium. Beatae atque, sapiente odit aliquam molestias unde dolor facere distinctio repellat corrupti est doloremque nisi pariatur dignissimos eius? Sapiente, repellendus dolor modi qui possimus quae magnam at nobis voluptate ratione
quo nostrum voluptatem delectus excepturi veritatis neque in, unde voluptatum culpa ad aut. Dolores porro nisi modi iste itaque, repellendus ratione similique iure error. Numquam voluptatem similique magnam, ipsa quo libero, dicta excepturi repudiandae
totam ipsum facere suscipit ipsam dolorem quisquam quasi. Accusantium, eveniet, ea. Quia consequuntur accusantium facere ex et architecto suscipit quas. Temporibus distinctio nesciunt, quae non laborum amet itaque, accusamus dolorem, pariatur magnam
repellat excepturi earum dignissimos eius dolores odit eos nobis magni. Vitae, beatae! Quos cum eius saepe blanditiis praesentium rerum voluptate, amet architecto optio fuga vero voluptatem temporibus excepturi sed, beatae culpa perferendis consectetur
laboriosam recusandae veritatis repellendus similique voluptatibus! Non soluta nam repudiandae ratione eligendi ipsa maxime dicta, assumenda, alias cum ipsam dignissimos commodi reprehenderit, ipsum. Debitis, reiciendis, ipsum? Recusandae architecto
quod ipsum deleniti. Esse dignissimos amet, maxime sequi excepturi, distinctio! Nobis libero voluptate sapiente, quo excepturi, qui natus delectus. Animi dicta odio dignissimos, voluptate necessitatibus molestiae dolor provident possimus quisquam,
itaque id delectus maiores reprehenderit illum nemo sapiente voluptatibus iste quo adipisci, qui dolore nobis suscipit. Ab eius error aspernatur officiis dolorum vel non, quos id, rem totam eaque repudiandae quis aliquid! Eveniet, alias, quaerat at
nisi sed beatae dolorem. Facilis, veniam, nihil! Eligendi dolore ratione aut quibusdam ipsam nisi esse, dicta, aspernatur velit omnis praesentium delectus illo qui possimus nobis, laudantium rerum excepturi odit harum? Mollitia dignissimos quas optio
iste, ut odit at quae consequuntur atque, molestias magni odio sed unde incidunt corrupti ea vel voluptas id. Maxime eos ipsam debitis facilis officiis cum quasi omnis commodi et unde aspernatur, consectetur vel, quia veritatis, eaque molestias! Quo
omnis in, fuga reiciendis, voluptas nam debitis natus consequatur suscipit ex aspernatur at, perspiciatis amet optio autem sit delectus consequuntur. Magni rerum, vitae totam inventore harum aspernatur itaque voluptatibus dolorum, laudantium nostrum
vel commodi voluptatem voluptas sed reiciendis quia temporibus ducimus, quod. Illo et neque quasi quas minus. Dicta labore fuga sapiente nam praesentium repudiandae quam pariatur quibusdam recusandae eius, harum fugit ex quae minus impedit est quas,
neque ab molestiae itaque! Repellat quam nihil dolorum dolores quia harum reiciendis aspernatur nostrum voluptates maiores sapiente voluptate consequatur, perferendis tempore amet tenetur illum in, suscipit. Quia dolores, quibusdam temporibus nostrum
eum aliquid commodi earum, labore eos sint sit libero deleniti nobis, laboriosam. Iure officia laudantium hic quasi ex saepe odit exercitationem nisi magni consequuntur aspernatur rem distinctio accusantium, ducimus dolorem velit minima quidem, id,
veniam quae quas fugiat aliquam! Obcaecati!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
最佳答案
替换
scrollTop: $("div#getAhrefs").offset().top
具有
scrollTop: $( getAhrefs ).offset().top //since getAhrefs is a variable