Jquery 平滑滚动在固定 div 中不起作用
Jquery smooth scroll doesn't work in fixed div
我想添加流畅的链接。但是，如果 divs 在 fixed div 内，则不起作用。我尝试了许多滚动 js 函数，但 none 在我的代码中不起作用。您可以在下面看到我的代码和演示。
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
var scroll;
if($(window).scrollTop()==0){
scroll = ($target.offset().top) - 160
}else{
scroll = ($target.offset().top) - 60
}
$('html, body').stop().animate({
'scrollTop': scroll
}, 900, 'swing', function () {
//window.location.hash = target;
});
});
});
.content {
height: 100%;
}
#left,
#right {
position: fixed;
height: 100%;
}
#left {
width: 50%;
}
#right {
width: 50%;
right: 0;
background: #efefef;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div id="left">
<a href="#about" class="btn">About</a>
<a href="#contact" class="btn">Contact</a>
</div>
<div id="right">
<div id="about">
<h1>About</h1>
<p>xx</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi nihil aspernatur quae suscipit maiores asperiores dolor dicta doloribus, facilis quas, cum. Eveniet, debitis alias quae beatae veritatis expedita assumenda voluptatem, maxime autem sunt vero velit eum, facilis illum magni neque soluta exercitationem. Odio distinctio incidunt ratione fugiat dicta non qui officia, obcaecati, ea cumque iusto quam et, accusantium unde eaque similique in! Eveniet culpa hic illo asperiores possimus itaque dolorem sapiente minima praesentium esse odio, illum beatae, voluptatem at error quo quisquam harum. Aut culpa ipsum soluta et in facere deserunt cum. Aliquam quis voluptatem laborum voluptatibus inventore ut optio, ad, ducimus harum maiores laboriosam ratione temporibus aut, ipsum ullam minima excepturi nisi aspernatur in repellat aperiam. Praesentium ea laborum corporis, voluptates earum tempora et ipsa quibusdam dolores amet nihil autem nisi, explicabo accusantium. Eos fugit aut eveniet eum expedita nihil aliquam ipsum voluptatem minus, nam officiis praesentium neque consectetur a, eius corporis repellat laborum dignissimos doloribus itaque ullam distinctio, dolorem rerum libero cum! Ducimus labore, unde eos nulla modi placeat consequatur aliquid vero in dolore eum, deserunt quas iure sapiente repellat, libero provident beatae necessitatibus asperiores aspernatur sunt mollitia suscipit adipisci! Non cupiditate ea quae, quia? Harum doloremque vitae dicta officia molestias a inventore sequi, minus tenetur perferendis. Odio sit ad nostrum labore, dolorem dolores iusto, recusandae quidem blanditiis? Error modi accusamus ratione repellat quaerat quas asperiores tempora vel ipsum sequi omnis deserunt qui, debitis quod explicabo unde enim necessitatibus nulla eligendi voluptatem beatae veniam! Eligendi quia praesentium iste officia. Eum aliquid, distinctio illo harum nobis, expedita tempore explicabo eius consequuntur a ut reiciendis nostrum amet voluptate officia omnis autem. Ea earum est numquam minus id! Temporibus quae, voluptatum explicabo, facere dolore voluptate blanditiis quod aspernatur consequatur porro. Sit doloribus accusamus veritatis autem totam praesentium, debitis iure, itaque eveniet ipsa amet possimus a recusandae. Aliquam cumque officiis quod hic optio illum, nulla, neque, quae necessitatibus voluptatem fuga tempore, vel harum repellat maiores blanditiis nisi ipsam doloremque a iure atque recusandae iusto commodi. Voluptatibus veritatis fuga asperiores cupiditate nemo impedit nihil vel quis inventore aut doloremque recusandae hic praesentium ipsam, animi dicta, odio nostrum illo velit ut error, labore. Facilis voluptatibus repudiandae laudantium quas. Repellendus aperiam recusandae at. Repellendus ut quas voluptatibus aperiam dolor? Obcaecati, esse doloribus id ad delectus. Natus veniam ipsam quam cum commodi, aperiam. Commodi earum consequuntur nam, suscipit autem, quos dolor impedit laborum assumenda saepe numquam, nesciunt tempore quibusdam magni dignissimos nihil praesentium libero ipsa aliquam doloremque veritatis quas unde laudantium atque! Voluptate similique odio dolores animi modi explicabo aliquid ex atque reiciendis voluptatibus suscipit aspernatur, debitis corrupti eligendi unde sequi iure maxime. Aspernatur iste dolorem nisi beatae tempore ea at rem consectetur, perspiciatis omnis, debitis explicabo eum nulla. Eaque provident magnam sequi, porro minus. Quae dignissimos optio quidem quasi reprehenderit! Repellat optio, sequi iure, libero tempora assumenda cumque eius autem, nesciunt itaque magnam provident dolore atque excepturi. Magnam aliquam quam, minus et ad error, voluptate assumenda esse laboriosam harum laudantium exercitationem optio eaque doloribus fuga, odit illo aspernatur aliquid dolor voluptatem incidunt? Adipisci, voluptatum, maxime! Cum odio aperiam dolor nihil sequi eum provident culpa ex, repellat id aspernatur alias magnam corrupti minima possimus commodi in consequatur mollitia at, ipsam quas officiis saepe! Rerum maiores mollitia placeat ex beatae illum cumque accusantium molestiae fugiat in officiis voluptatum nulla laboriosam molestias totam tenetur nobis amet voluptates iure, vel modi. Dolores blanditiis, provident culpa magni nulla soluta qui nostrum temporibus doloremque est voluptatibus at vitae ab reiciendis magnam optio. Quam repellat a illo quibusdam culpa nihil, tenetur, eius ipsa mollitia aspernatur natus soluta. Consequatur doloribus est, fuga.</p>
</div>
</div>
</div>
将 $('html, body').stop().animate 更改为 $('#right').stop().animate
我会提供一个稍微不同的解决方案，主要是因为接受的答案有与其偏移计算相关的错误，导致多次点击 link 给出不正确的结果。
此代码还提供更多可重用代码，允许在调用时定义滚动目标的偏移量。
function scrollToElem(target, $container, offset, duration, easing) {
$container.stop().animate({
'scrollTop': target.offsetTop + offset
}, duration, easing);
}
$(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
scrollToElem(
document.querySelector(this.hash),
$('#right'),
0,
900,
'swing'
);
});
});
我想添加流畅的链接。但是，如果 divs 在 fixed div 内，则不起作用。我尝试了许多滚动 js 函数，但 none 在我的代码中不起作用。您可以在下面看到我的代码和演示。
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
var scroll;
if($(window).scrollTop()==0){
scroll = ($target.offset().top) - 160
}else{
scroll = ($target.offset().top) - 60
}
$('html, body').stop().animate({
'scrollTop': scroll
}, 900, 'swing', function () {
//window.location.hash = target;
});
});
});
.content {
height: 100%;
}
#left,
#right {
position: fixed;
height: 100%;
}
#left {
width: 50%;
}
#right {
width: 50%;
right: 0;
background: #efefef;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div id="left">
<a href="#about" class="btn">About</a>
<a href="#contact" class="btn">Contact</a>
</div>
<div id="right">
<div id="about">
<h1>About</h1>
<p>xx</p>
</div>
<div id="contact">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi nihil aspernatur quae suscipit maiores asperiores dolor dicta doloribus, facilis quas, cum. Eveniet, debitis alias quae beatae veritatis expedita assumenda voluptatem, maxime autem sunt vero velit eum, facilis illum magni neque soluta exercitationem. Odio distinctio incidunt ratione fugiat dicta non qui officia, obcaecati, ea cumque iusto quam et, accusantium unde eaque similique in! Eveniet culpa hic illo asperiores possimus itaque dolorem sapiente minima praesentium esse odio, illum beatae, voluptatem at error quo quisquam harum. Aut culpa ipsum soluta et in facere deserunt cum. Aliquam quis voluptatem laborum voluptatibus inventore ut optio, ad, ducimus harum maiores laboriosam ratione temporibus aut, ipsum ullam minima excepturi nisi aspernatur in repellat aperiam. Praesentium ea laborum corporis, voluptates earum tempora et ipsa quibusdam dolores amet nihil autem nisi, explicabo accusantium. Eos fugit aut eveniet eum expedita nihil aliquam ipsum voluptatem minus, nam officiis praesentium neque consectetur a, eius corporis repellat laborum dignissimos doloribus itaque ullam distinctio, dolorem rerum libero cum! Ducimus labore, unde eos nulla modi placeat consequatur aliquid vero in dolore eum, deserunt quas iure sapiente repellat, libero provident beatae necessitatibus asperiores aspernatur sunt mollitia suscipit adipisci! Non cupiditate ea quae, quia? Harum doloremque vitae dicta officia molestias a inventore sequi, minus tenetur perferendis. Odio sit ad nostrum labore, dolorem dolores iusto, recusandae quidem blanditiis? Error modi accusamus ratione repellat quaerat quas asperiores tempora vel ipsum sequi omnis deserunt qui, debitis quod explicabo unde enim necessitatibus nulla eligendi voluptatem beatae veniam! Eligendi quia praesentium iste officia. Eum aliquid, distinctio illo harum nobis, expedita tempore explicabo eius consequuntur a ut reiciendis nostrum amet voluptate officia omnis autem. Ea earum est numquam minus id! Temporibus quae, voluptatum explicabo, facere dolore voluptate blanditiis quod aspernatur consequatur porro. Sit doloribus accusamus veritatis autem totam praesentium, debitis iure, itaque eveniet ipsa amet possimus a recusandae. Aliquam cumque officiis quod hic optio illum, nulla, neque, quae necessitatibus voluptatem fuga tempore, vel harum repellat maiores blanditiis nisi ipsam doloremque a iure atque recusandae iusto commodi. Voluptatibus veritatis fuga asperiores cupiditate nemo impedit nihil vel quis inventore aut doloremque recusandae hic praesentium ipsam, animi dicta, odio nostrum illo velit ut error, labore. Facilis voluptatibus repudiandae laudantium quas. Repellendus aperiam recusandae at. Repellendus ut quas voluptatibus aperiam dolor? Obcaecati, esse doloribus id ad delectus. Natus veniam ipsam quam cum commodi, aperiam. Commodi earum consequuntur nam, suscipit autem, quos dolor impedit laborum assumenda saepe numquam, nesciunt tempore quibusdam magni dignissimos nihil praesentium libero ipsa aliquam doloremque veritatis quas unde laudantium atque! Voluptate similique odio dolores animi modi explicabo aliquid ex atque reiciendis voluptatibus suscipit aspernatur, debitis corrupti eligendi unde sequi iure maxime. Aspernatur iste dolorem nisi beatae tempore ea at rem consectetur, perspiciatis omnis, debitis explicabo eum nulla. Eaque provident magnam sequi, porro minus. Quae dignissimos optio quidem quasi reprehenderit! Repellat optio, sequi iure, libero tempora assumenda cumque eius autem, nesciunt itaque magnam provident dolore atque excepturi. Magnam aliquam quam, minus et ad error, voluptate assumenda esse laboriosam harum laudantium exercitationem optio eaque doloribus fuga, odit illo aspernatur aliquid dolor voluptatem incidunt? Adipisci, voluptatum, maxime! Cum odio aperiam dolor nihil sequi eum provident culpa ex, repellat id aspernatur alias magnam corrupti minima possimus commodi in consequatur mollitia at, ipsam quas officiis saepe! Rerum maiores mollitia placeat ex beatae illum cumque accusantium molestiae fugiat in officiis voluptatum nulla laboriosam molestias totam tenetur nobis amet voluptates iure, vel modi. Dolores blanditiis, provident culpa magni nulla soluta qui nostrum temporibus doloremque est voluptatibus at vitae ab reiciendis magnam optio. Quam repellat a illo quibusdam culpa nihil, tenetur, eius ipsa mollitia aspernatur natus soluta. Consequatur doloribus est, fuga.</p>
</div>
</div>
</div>
将 $('html, body').stop().animate 更改为 $('#right').stop().animate
我会提供一个稍微不同的解决方案，主要是因为接受的答案有与其偏移计算相关的错误，导致多次点击 link 给出不正确的结果。
此代码还提供更多可重用代码，允许在调用时定义滚动目标的偏移量。
function scrollToElem(target, $container, offset, duration, easing) {
$container.stop().animate({
'scrollTop': target.offsetTop + offset
}, duration, easing);
}
$(function() {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
scrollToElem(
document.querySelector(this.hash),
$('#right'),
0,
900,
'swing'
);
});
});