如何通过按钮单击移动滚动？
Posted
技术标签:
【中文标题】如何通过按钮单击移动滚动？【英文标题】：How to move the scroll by button click? 【发布时间】：2020-04-29 06:33:06 【问题描述】：我使用了 ng-scrollbars 和 jquery.mCustomScrollbar，我想在最后一个元素到达时通过按钮移动滚动条。
我有点用键盘箭头键移动，但只有当我到达最后一个元素时，反之亦然。
我使用这些代码在行之间移动。
// ArrowDown
if (event.keyCode === 40)
self.Func.stopPropagationPreventDefault(event);
self.Data.keyDownIndex++;
if (self.Data.keyDownIndex < array.length)
self.Data.focusedObj = array[self.Data.keyDownIndex];
else
self.Data.keyDownIndex = 0;
self.Data.focusedObj = array[self.Data.keyDownIndex];
// ArrowUp
else if (event.keyCode === 38)
self.Func.stopPropagationPreventDefault(event);
self.Data.keyDownIndex--;
if (self.Data.keyDownIndex >= 0)
self.Data.focusedObj = array[self.Data.keyDownIndex];
else
self.Data.keyDownIndex = array.length - 1;
self.Data.focusedObj = array[self.Data.keyDownIndex];
【问题讨论】：
【参考方案1】：<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hey</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
*list-style: none; padding: 0; margin: 0;
.linkstext-align: center; margin: 20px
.listposition: absolute; width: 100%;
.list_elementtext-align: center; padding: 10px; background: #eee; border: 2px solid #fff;
</style>
<script>
$(document).ready(function()
// Add smooth scrolling to all links
$("a").on('click', function(event)
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "")
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate(
scrollTop: ($(hash).offset().top) - 200,
, 800, function()
// Add hash (#) to URL when done scrolling (default click behavior)
$(hash).css("background","red");
window.location.hash = hash;
);
// End if
);
);
</script>
</head>
<body>
<div class="links">
<a href="#15">go to element 15</a>
</div>
<ul class="list">
<li class="list_element" id="1">1</li>
<li class="list_element" id="2">2</li>
<li class="list_element" id="3">3</li>
<li class="list_element" id="4">4</li>
<li class="list_element" id="5">5</li>
<li class="list_element" id="6">6</li>
<li class="list_element" id="7">7</li>
<li class="list_element" id="8">8</li>
<li class="list_element" id="9">9</li>
<li class="list_element" id="10">10</li>
<li class="list_element" id="11">11</li>
<li class="list_element" id="12">12</li>
<li class="list_element" id="13">13</li>
<li class="list_element" id="14">14</li>
<li class="list_element" id="15">15</li>
<li class="list_element" id="16">16</li>
<li class="list_element" id="17">17</li>
<li class="list_element" id="18">18</li>
<li class="list_element" id="19">19</li>
<li class="list_element" id="20">20</li>
<li class="list_element" id="21">21</li>
<li class="list_element" id="22">22</li>
<li class="list_element" id="23">23</li>
<li class="list_element" id="24">24</li>
<li class="list_element" id="25">25</li>
<li class="list_element" id="26">26</li>
<li class="list_element" id="27">27</li>
<li class="list_element" id="28">28</li>
<li class="list_element" id="29">29</li>
<li class="list_element" id="30">30</li>
</ul>
</body>
</html>
【讨论】：
【参考方案2】：为什么不能使用 html 锚点？您只需为该元素提供一个数字 id 并在需要时调用它
【讨论】：
我用箭头键在行之间移动。我希望滚动直到突出显示的部分向上或向下移动，但是当突出显示的部分完成并想要转到未显示的字段时，滚动将与显示字段一样低或一样高。 首先获取该元素的坐标，然后添加一些 你能举个例子吗？ 我使用了我在w3schools.com/howto/howto_css_smooth_scroll.asp#section2 找到的一个小功能并对其进行了修改以上是关于如何通过按钮单击移动滚动？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过单击 iPhone 故事板中的 ActionSheet 按钮移动到下一个 viewController