Javascript 本地滚动到带有单个链接的两个div
我试图让一个链接滚动到两个不同溢出div中的两个不同点 这也许能更清楚地解释我想做什么 HTMLJavascript 本地滚动到带有单个链接的两个div,javascript,jquery,html,scroll,scrollto,Javascript,Jquery,Html,Scroll,Scrollto,我试图让一个链接滚动到两个不同溢出div中的两个不同点 这也许能更清楚地解释我想做什么 HTML <div id="small-box-links"> <a href="#small-box1">Link to small-box #1 and #5</a> <a href="#small-box2">Link to small-box #2 and #4</a> <a href="#small-box3
<div id="small-box-links">
<a href="#small-box1">Link to small-box #1 and #5</a>
<a href="#small-box2">Link to small-box #2 and #4</a>
<a href="#small-box3">Link to small-box #3 and #6</a>
</div>
<div id="small-box-container">
<div id="small-box1" class="small-box">Small-Box #1</div>
<div id="small-box2" class="small-box">Small-Box #2</div>
<div id="small-box3" class="small-box">Small-Box #3</div>
</div>
<div id="small-box-container2">
<div id="small-box4" class="small-box">Small-Box #4</div>
<div id="small-box5" class="small-box">Small-Box #5</div>
<div id="small-box6" class="small-box">Small-Box #6</div>
</div>
CSS
$(document).ready(function()
{
// Scroll the content inside the #scroll-container div
$('#small-box-links').localScroll({
target:'#small-box-container'
});
$('#small-box-links').localScroll({
target:'#small-box-container2'
});
});
#small-box-container {
border: 1px solid black;
padding: 20px;
width: 300px;
height: 200px;
overflow: scroll;
}
#small-box-container2 {
border: 1px solid black;
padding: 20px;
width: 300px;
height: 200px;
overflow: scroll;
}
.small-box {
color: #fff;
padding: 10px;
width: 200px;
height: 200px;
margin: 0 0 50px 0;
}
#small-box1 {
background: blue;
}
#small-box2 {
background: red;
}
#small-box3 {
background: green;
}
#small-box4 {
background: orange;
}
#small-box5 {
background: purple;
}
#small-box6 {
background: yellow;
}
如果有人问过这个问题,请提前道歉,我的搜索没有结果
谢谢 这是一个非常简单的逻辑
. 按照链接获取完整的工作代码 以下是实现您的问题目标的用法和最佳方法:
$(function() {
//========= Funct to Scroll box #1 n #4
$('a#box1').on('click', function() {
$('#small-box1').ScrollTo();
$('#small-box4').ScrollTo();
});
//========= Funct to Scroll box #2 n #5
$('a#box2').on('click', function() {
$('#small-box2').ScrollTo();
$('#small-box5').ScrollTo();
});
//========= Funct to Scroll box #3 n #6
$('a#box3').on('click', function() {
$('#small-box3').ScrollTo();
$('#small-box6').ScrollTo();
});
});