javascript - JQuery隐藏和淡入时丢失的滚动位置
问题描述
在页面上有一个问题列表，可能很长。我在示例代码中创建了一个小列表。用户滚动到问题，点击它，列表隐藏，单个问题出现。用户阅读并单击“X”将其关闭，原始列表重新出现在相同的位置（我想要的，但没有得到）。
问题是列表重新出现在顶部而不是保持其滚动位置。
使用 event.preventDefault() 更改为显示/隐藏、fadeIN/fadeOut 似乎没有什么区别。
代码使用 Bootstrap 4/Jquery。
（放大浏览器以获取滚动条进行测试）
下面的代码：
//********************************************************************************************************
// Clone Question, display on its own, hide existing list of questions
//********************************************************************************************************
$(document).on('click', '[data-name="question"]', function(){
event.preventDefault();
var qid = $(this).attr("data-qid");//id of the question being answered
//var clone = $(this).clone();//clone entire question element to paste into new space
var clone = $('#header'+qid).clone();//clone entire question element to paste into new space
$('#load_data').hide();
$(clone).hide().appendTo('#load_single_answer').fadeIn(1000);
var html = '<div class="container">'+//provide an X button to close the single question display
'<div class="exit btn btn-light btn-space col-12 box displ text-center align-self-center" style="font-size:120%"><strong>X</strong></div>'+
'</div>';
$(html).appendTo('#load_single_answer');
});
//**********************************************************************
// Close single question display, bring back the list of questions
//**********************************************************************
$(document).on('click', '.exit', function(){
event.preventDefault();
//restore all background data
$('#load_data').fadeIn(500);
$('#load_single_answer').empty();//clear out single answer data
});<!DOCTYPE html>
<html lang="en">
<head>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#f2f2f2;">
<!-- loading point for displaying single questions and answers -->
<div class='container' style="max-width:900px;">
<div id="load_single_answer"></div>
</div>
<div id="main">
<!-- Question and Answers loaded here via ajax call -->
<div id = "dataX" class="container p-0" style="max-width: 900px;">
<div id="load_data">
<!-- BEGINNING LIST OF QUESTIONS-->
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header165" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="165" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header166" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="166" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header167" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="167" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header168" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="168" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header169" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="169" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header170" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="170" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header171" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="171" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header172" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="172" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- END OF LIST OF QUESTIONS -->
</div>
</div>
</div>
</body>解决方案
我会通过使列表显示和隐藏（而不是删除它）然后将单个答案视图固定到视口顶部（而不是添加到页面顶部）来做到这一点。这样，滚动位置自然而然地保留下来，而无需管理某种状态。
如果你想用动画隐藏问题，你应该使用 CSS。
//********************************************************************************************************
// Clone Question, display on its own, hide existing list of questions
//********************************************************************************************************
$(document).on('click', '[data-name="question"]', function(){
event.preventDefault();
var qid = $(this).attr("data-qid");//id of the question being answered
//var clone = $(this).clone();//clone entire question element to paste into new space
var clone = $('#header'+qid).clone();//clone entire question element to paste into new space
$('#load_data').removeClass('fadein').addClass('fadeout')
$(clone).hide().appendTo('#load_single_answer').fadeIn(1000);
var html = '<div class="container">'+//provide an X button to close the single question display
'<div class="exit btn btn-light btn-space col-12 box displ text-center align-self-center" style="font-size:120%"><strong>X</strong></div>'+
'</div>';
$(html).appendTo('#load_single_answer');
});
//**********************************************************************
// Close single question display, bring back the list of questions
//**********************************************************************
$(document).on('click', '.exit', function(){
event.preventDefault();
//restore all background data
$('#load_data').removeClass('fadeout').addClass('fadein')
$('#load_single_answer').empty();//clear out single answer data
});#load_single_answer {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.fadeout {
opacity: 0;
transition-duration: .5s;
}
.fadein {
opacity: 1;
transition-duration: .5s;
}<head>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body style="background-color:#f2f2f2;">
<!-- loading point for displaying single questions and answers -->
<div class='container' style="max-width:900px;">
<div id="load_single_answer"></div>
</div>
<div id="main">
<!-- Question and Answers loaded here via ajax call -->
<div id = "dataX" class="container p-0" style="max-width: 900px;">
<div id="load_data">
<!-- BEGINNING LIST OF QUESTIONS-->
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header165" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="165" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header166" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="166" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header167" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="167" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header168" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="168" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header169" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="169" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header170" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="170" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header171" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="171" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- questions here -->
<div data-name="results">
<!-- individual question container with DETAILS link -->
<div class="card-header" id="header172" style="border-radius:10px;background-color:white;border:none;">
<div data-qid="172" data-aid="0" data-name="question" style="cursor: pointer;">
<div style="margin-bottom:-7px;">
<h5 style="font-family: "Verdana", Verdana;font-weight: bolder;margin-top:0px;"><span style="white-space:pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam?</span>
</div>
</div>
</div>
<br>
</div>
<!-- END OF LIST OF QUESTIONS -->
</div>
</div>
</div>
</body>推荐阅读
- python - Discord BOT 使用个人 ID 向某人发送 DM
- algorithm - 不同编程语言中的实现可能会影响时间复杂度是什么意思？
- r - ggplot：如何深入获取此图？
- r - “../”相对路径目录不起作用 R
- c# - 如何从单独的类中提取字符串，同时将类保存在我的主列表中（C#，Unity）
- reactjs - Storm-React-Diagram Demo 自定义链接1
- css - 使用媒体查询更改 CSS 按钮的困难
- android - 如何获取最新的关系项而不是 Android Room 中的列表
- c# - 与 chrome > 查看页面源相比，为什么 HttpWebRequest 返回显着不同的 html 源？
- javascript - 如何使用文档和集合 Firebase