Question

我有一个很大的性别产品列表，所以会出现右滚动条，当我单击一个性别产品时，会显示一个模型，并在该模型中显示该性别的产品列表，同时向左滚动条出现在左侧。我在此模型内制作了一个查询代码，当我单击按钮时向上滚动以滚动到模型顶部，但问题是当我单击按钮时，右栏不滚动左栏，所以我该怎么办使左栏滚动到顶部而不是右侧？ -这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).scroll(function()
{
if ($(this).scrollTop() > 100)
{
    $('.scrollup').fadeIn();
}
else
{
    $('.scrollup').fadeOut();
}
});

$('.scrollup').click(function()
{
$("html, body").animate({ scrollTop: 0 }, 
600);
return false;
});
</script>

Answer 1

取代$("html, body").animate({ scrollTop: 0 }, 600);，使其：

$("#Id-of-your-modal-container-div").animate({ scrollTop: 0 }, 600);

这是一个例子：

jsfiddle Demo

$('#btnScrollMain').click(function(){
	$("html, body").animate({ scrollTop: 0 },600);
});

$('.btnMdlTop').click(function(){
	$("#modalDIV").animate({ scrollTop: 0 },600);
});

$('#btnShowModal').click(function(){
	$("#modalDIV").fadeIn();
});

#modalDIV{position:absolute;top:5%;left:5%;width:60vw;height:60vh;}

#modalDIV{background:#888;color:lightblue;overflow:auto;display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<button id="btnShowModal">Show Modal</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button id="btnScrollMain">Top</button>

<div id="modalDIV">
    <p>SCROLL WAAAAY DOWN... Use one of the buttons to schlep back to top...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <button class="btnMdlTop">Top</button>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <p>Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious volume of forgotten code...</p>
    <button class="btnMdlTop">Top</button>
</div>

如何使滚动条的垂直左栏滚动到顶部？

1 个答案: