javascript - 滚动回顶部时向上滚动到上一个 div
问题描述
滚动回顶部时,我试图回滚到上一部分。我有在最后一个滑块之后连续滚动的解决方案。但是现在我在滚动回顶部时找不到相反的内容。(在拳头滑块后连续滚动顶部)我附上了jsfiddle和codepen片段以供参考
$(document).ready(function () {
$('.customer-logos').slick({
vertical: true,
infinite: false,
arrows: false,
dots: true });
});
const slider = $(".customer-logos");
slider.on('wheel', function (e) {
var slideCount = $(this)[0].slick["slideCount"];
var currentIndex = $(this).slick("slickCurrentSlide");
var totalSildeToShow = $(this)[0].slick.options["slidesToShow"];
if (e.originalEvent.deltaY < 0) {
e.preventDefault();
$(this).slick('slickPrev');
} else {
if (slideCount - totalSildeToShow === currentIndex)
return;
e.preventDefault();
$(this).slick('slickNext');
}
});
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width:500px;
height:250px;
}
.slick-dots {
position: absolute;
bottom: 37% !important;
display: grid !important;
width: 0 !important;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
top: 15%;
right: 0;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick.css">
<link rel="stylesheet" href="https://unpkg.com/slick-carousel@1.7.1/slick/slick-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<section style="height: 100vh;background: #f436e3"></section>
<h2>Our Partners</h2>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>
</div>
<div class="col-md-6">
<div class="customer-logos slider">
<div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
<div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
</div>
</div>
</div>
</div>
<section style="height: 100vh;background: #f436e3"></section>
解决方案
推荐阅读
- html - Clearfix div 不会清除引导程序中的浮动
- java - 如何修复 Android Studio 中的颜色缓冲区错误?
- java - Cassandra - 写入错误。如何解决?
- python - 读取两个关键字 Python 之间的行
- c++ - std::atomic 是如何实现的
- localization - 微服务国际化和本地化的最佳实践
- azure - 在 HTTP POST 中的 Azure 逻辑应用程序中出现错误:-“BadRequest。Http 请求失败:内容不是有效的 JSON。”
- php - LOAD DATA LOCAL INFILE 通过终端工作,但不是 cron 作业
- python - 在python中,如何解析多层JSON?
- python - 蟒蛇 | MySQL | AttributeError:模块'mysql.connector'没有属性'connect'