我一直在这里读很多东西，我希望我不会发布已经在这里讨论的任何内容，因为我还没有找到解决问题的方法。
我使用此Javascript函数显示并隐藏了两个DIV。
当动作触发时，我会滚动到页面的开头。我想留在同一个地方。
我已经尝试display = 'block' / 'none'而非可见度，但这并没有改变一件事。
我的代码格式如下：
function show(target) {
document.getElementById(target).style.visibility = 'visible';
}
function hide(target) {
document.getElementById(target).style.visibility = 'hidden';
}<div id="content">
<div id="popup1">
<div id="hoverbarnavi">
<a href="#" onclick="hide('popup1'); show('popup2')">Close</a>
</div>
<div id="hoverbarcontent">
This is Popup 1
</div>
</div>
<div id="popup2">
<div id="hoverbarnavi ">
<a href="# " onclick="hide( 'popup2') ">Close </a>
</div>
<div id="hoverbarcontent ">
This is Popup 2
</div>
</div>
<div class="element ">Content 1 goes here</div>
<div class="element ">Content 2 goes here/div>
</div>
我想用脚本显示和隐藏的div是popup1和popup2。他们是position: fixed;。
类element具有视口高度。
我希望这是解决问题的足够信息。 如果没有，请随时向我询问。
非常感谢！
编辑：这是一个JSFiddle：https://jsfiddle.net/vx6vju3c/2/
答案 0 :(得分：0)
将<a>代码更改为<buttons>：
<div id="content">
<div id="popup1">
<div id="hoverbarnavi">
<button type="button" onclick="hide('popup1'); show('popup2')">Close</button>
</div>
<div id="hoverbarcontent">
This is Popup 1
</div>
</div>
<div id="popup2">
<div id="hoverbarnavi">
<button type="button" onclick="hide('popup2')">Close </button>
</div>
<div id="hoverbarcontent">
This is Popup 2
</div>
</div>
<div class="element">Content 1 goes here</div>
<div class="element">Content 2 goes here</div>
</div>
您的问题归因于href="#"标记内的<a>。通过点击它，您将始终位于页面顶部。
答案 1 :(得分：0)
您可以将min-height设置为#content对您有帮助。
#content {
min-height:100px;
}
答案 2 :(得分：0)
删除href="#"或将<a>标记更改为<button>
答案 3 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Scroll To Top Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
.display-container
{
position: absolute;
top: 3rem;
left: 1rem;
width: 300px;
}
body
{
background: #eee;
}
.container{
width:900px;
margin:30px auto;
padding:25px;
min-height:400px;
height:auto;
}
.container h2 { margin-top:30px;}
.scrollToTop{
width: 50px;
height: 50px;
padding: 10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #fff;
text-decoration: none;
position:fixed;
bottom: 75px;
right: 40px;
display: none;
background: #000;
}
.scrollToTop:hover{
text-decoration: none;
}
</style>
<script>
var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){
scrollToTop.init( );
});
var scrollToTop =
{
/**
* When the user has scrolled more than 100 pixels then we display the scroll to top button using the fadeIn function
* If the scroll position is less than 100 then hide the scroll up button
*
* On the click event of the scroll to top button scroll the window to the top
*/
init: function( ){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
// Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
}
};
</script>
</head>
<body>
<section class="container">
<h2>JQuery Scroll To Top Demo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi. Sed congue dolor risus, et ornare massa.</p>
<p>Nulla sodales aliquet iaculis. Quisque ullamcorper posuere magna non imperdiet. Fusce egestas arcu sit amet orci volutpat venenatis. Proin laoreet leo quis nulla iaculis id tincidunt arcu laoreet. Cras non ante felis, at pulvinar arcu. Vivamus porta sollicitudin massa congue elementum. Proin fringilla massa vel mi ultricies et molestie justo dapibus. Mauris elit orci, euismod non sodales ac, gravida eget mauris.</p>
<p>Pellentesque accumsan ipsum ut elit tempus ut egestas diam molestie. Quisque in justo vitae metus volutpat consequat. Phasellus ac quam eu diam sodales congue vel at dolor. Nam scelerisque pellentesque pharetra. Curabitur nibh nisl, porta sed tristique id, convallis vitae ante. Nam volutpat nisl vitae lectus mattis tempus. Integer imperdiet bibendum ornare. In ultricies, tellus eget fermentum dapibus, massa eros adipiscing sapien, ac eleifend mi quam quis leo. Integer porttitor gravida condimentum. Nunc massa purus, iaculis sed scelerisque a, rhoncus nec mi. Nulla sollicitudin, turpis a aliquet porttitor, mauris justo pharetra lacus, sit amet tristique dolor arcu in eros. Proin nibh ligula, condimentum eu feugiat ut, sagittis condimentum orci. Etiam non ipsum ac metus fermentum laoreet.</p>
<p>Vivamus sed lectus ut tortor vulputate adipiscing vitae quis justo. Quisque ac pulvinar libero. Donec dui sem, venenatis laoreet eleifend quis, vestibulum in diam. In vitae eros vel risus iaculis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis dictum nisl bibendum imperdiet. Maecenas in enim a felis pharetra faucibus vel eget leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dapibus imperdiet diam, a lobortis tellus sodales euismod. In viverra commodo aliquet. In tempor ipsum porta magna euismod non ultrices ligula facilisis. Aliquam fermentum nulla non purus aliquet adipiscing. Vestibulum et odio id augue imperdiet tristique. Morbi felis neque, iaculis sit amet vestibulum et, ultrices at orci.</p>
<p>Praesent pretium, lectus eget euismod ullamcorper, lectus odio ultrices ante, in hendrerit nisi orci nec massa. Sed quis posuere est. Suspendisse potenti. Vestibulum dignissim sollicitudin odio at semper. Vestibulum vitae euismod justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus bibendum ultrices fermentum. Vestibulum lobortis pellentesque sapien, a lobortis metus blandit non. Vivamus ut placerat magna. Maecenas tincidunt turpis sit amet massa posuere faucibus.</p>
<p>Pellentesque malesuada libero eu nunc ornare imperdiet. Nam purus quam, fringilla quis mollis ac, malesuada quis erat. Nullam dapibus feugiat mauris, id lobortis sem cursus at. Ut sed tellus ac lacus hendrerit iaculis. Pellentesque lectus arcu, congue sit amet vehicula at, volutpat ac augue. Duis sit amet turpis eget eros accumsan venenatis vel in turpis. Quisque consequat iaculis auctor. Donec sagittis est ut lorem viverra eget tristique felis malesuada. Sed mattis tincidunt venenatis. Quisque in tellus non lectus mattis imperdiet.</p>
<p>Quisque est massa, placerat quis vestibulum tincidunt, fringilla sed felis. Nullam mattis nisl eu libero tristique posuere. Aliquam erat volutpat. Praesent eu velit dolor, vitae tincidunt nulla. Duis vel enim mauris, nec ullamcorper leo. Nulla et dapibus nunc. Curabitur consectetur sapien vitae libero tristique viverra. Morbi massa urna, vulputate at viverra vitae, facilisis eget eros. Duis vehicula accumsan diam sit amet elementum. Vivamus ullamcorper, leo sit amet viverra blandit, elit lacus interdum augue, nec semper dui erat sed dui. Pellentesque dignissim pretium felis eu cursus. In commodo, velit non pharetra molestie, neque tellus rutrum sapien, quis consequat velit tortor ut orci. Proin sed tortor leo, at gravida felis. Integer scelerisque dolor nec quam pretium lacinia. Aliquam commodo rutrum urna, sed consectetur justo iaculis in. Quisque in nisl at nisl tincidunt ultricies.</p>
<p>Mauris sit amet nibh non nisi varius accumsan ut sit amet dolor. Nunc eu quam et est viverra vehicula in id dui. Nulla sit amet metus est. Donec bibendum, tellus iaculis iaculis tincidunt, diam dui convallis orci, laoreet gravida lorem elit id erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a nisl sem. Fusce scelerisque odio mattis eros elementum dapibus. Cras ultricies eleifend scelerisque. Vestibulum vitae posuere nisi. Nunc dictum aliquam urna, ut aliquet dui ultricies vitae. Nunc hendrerit dignissim ligula a bibendum. Quisque in nibh enim. Vestibulum laoreet pellentesque orci vel mollis. Maecenas vehicula bibendum quam. Nullam ac arcu justo, id pellentesque dolor. Maecenas quis ante felis, at porta neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in metus nec mauris egestas laoreet. Integer vehicula velit non massa suscipit at porta sem commodo. Donec nibh lectus, vulputate a aliquet quis, sollicitudin eget metus. Nullam quis tellus nibh. Praesent fermentum risus sit amet turpis eleifend dapibus. Duis tellus leo, tempor sit amet ultricies viverra, mollis at quam. Suspendisse hendrerit sagittis risus nec faucibus. Nam urna magna, porta vitae tincidunt sit amet, blandit eget diam. Vivamus a ornare augue. Vivamus sapien sem, facilisis vitae molestie eget, tempus ut augue. Sed suscipit facilisis mi, eu laoreet est gravida eu. Nulla et arcu quam, pellentesque adipiscing felis. Nam pretium augue sed sapien malesuada tempor. Nulla facilisi. Donec eu tempor mi. Sed congue dolor risus, et ornare massa.</p>
<p>Nulla sodales aliquet iaculis. Quisque ullamcorper posuere magna non imperdiet. Fusce egestas arcu sit amet orci volutpat venenatis. Proin laoreet leo quis nulla iaculis id tincidunt arcu laoreet. Cras non ante felis, at pulvinar arcu. Vivamus porta sollicitudin massa congue elementum. Proin fringilla massa vel mi ultricies et molestie justo dapibus. Mauris elit orci, euismod non sodales ac, gravida eget mauris.</p>
<p>Pellentesque accumsan ipsum ut elit tempus ut egestas diam molestie. Quisque in justo vitae metus volutpat consequat. Phasellus ac quam eu diam sodales congue vel at dolor. Nam scelerisque pellentesque pharetra. Curabitur nibh nisl, porta sed tristique id, convallis vitae ante. Nam volutpat nisl vitae lectus mattis tempus. Integer imperdiet bibendum ornare. In ultricies, tellus eget fermentum dapibus, massa eros adipiscing sapien, ac eleifend mi quam quis leo. Integer porttitor gravida condimentum. Nunc massa purus, iaculis sed scelerisque a, rhoncus nec mi. Nulla sollicitudin, turpis a aliquet porttitor, mauris justo pharetra lacus, sit amet tristique dolor arcu in eros. Proin nibh ligula, condimentum eu feugiat ut, sagittis condimentum orci. Etiam non ipsum ac metus fermentum laoreet.</p>
<p>Vivamus sed lectus ut tortor vulputate adipiscing vitae quis justo. Quisque ac pulvinar libero. Donec dui sem, venenatis laoreet eleifend quis, vestibulum in diam. In vitae eros vel risus iaculis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis dictum nisl bibendum imperdiet. Maecenas in enim a felis pharetra faucibus vel eget leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis dapibus imperdiet diam, a lobortis tellus sodales euismod. In viverra commodo aliquet. In tempor ipsum porta magna euismod non ultrices ligula facilisis. Aliquam fermentum nulla non purus aliquet adipiscing. Vestibulum et odio id augue imperdiet tristique. Morbi felis neque, iaculis sit amet vestibulum et, ultrices at orci.</p>
<p>Praesent pretium, lectus eget euismod ullamcorper, lectus odio ultrices ante, in hendrerit nisi orci nec massa. Sed quis posuere est. Suspendisse potenti. Vestibulum dignissim sollicitudin odio at semper. Vestibulum vitae euismod justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus bibendum ultrices fermentum. Vestibulum lobortis pellentesque sapien, a lobortis metus blandit non. Vivamus ut placerat magna. Maecenas tincidunt turpis sit amet massa posuere faucibus.</p>
<p>Pellentesque malesuada libero eu nunc ornare imperdiet. Nam purus quam, fringilla quis mollis ac, malesuada quis erat. Nullam dapibus feugiat mauris, id lobortis sem cursus at. Ut sed tellus ac lacus hendrerit iaculis. Pellentesque lectus arcu, congue sit amet vehicula at, volutpat ac augue. Duis sit amet turpis eget eros accumsan venenatis vel in turpis. Quisque consequat iaculis auctor. Donec sagittis est ut lorem viverra eget tristique felis malesuada. Sed mattis tincidunt venenatis. Quisque in tellus non lectus mattis imperdiet.</p>
<p>Quisque est massa, placerat quis vestibulum tincidunt, fringilla sed felis. Nullam mattis nisl eu libero tristique posuere. Aliquam erat volutpat. Praesent eu velit dolor, vitae tincidunt nulla. Duis vel enim mauris, nec ullamcorper leo. Nulla et dapibus nunc. Curabitur consectetur sapien vitae libero tristique viverra. Morbi massa urna, vulputate at viverra vitae, facilisis eget eros. Duis vehicula accumsan diam sit amet elementum. Vivamus ullamcorper, leo sit amet viverra blandit, elit lacus interdum augue, nec semper dui erat sed dui. Pellentesque dignissim pretium felis eu cursus. In commodo, velit non pharetra molestie, neque tellus rutrum sapien, quis consequat velit tortor ut orci. Proin sed tortor leo, at gravida felis. Integer scelerisque dolor nec quam pretium lacinia. Aliquam commodo rutrum urna, sed consectetur justo iaculis in. Quisque in nisl at nisl tincidunt ultricies.</p>
<p>Mauris sit amet nibh non nisi varius accumsan ut sit amet dolor. Nunc eu quam et est viverra vehicula in id dui. Nulla sit amet metus est. Donec bibendum, tellus iaculis iaculis tincidunt, diam dui convallis orci, laoreet gravida lorem elit id erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce a nisl sem. Fusce scelerisque odio mattis eros elementum dapibus. Cras ultricies eleifend scelerisque. Vestibulum vitae posuere nisi. Nunc dictum aliquam urna, ut aliquet dui ultricies vitae. Nunc hendrerit dignissim ligula a bibendum. Quisque in nibh enim. Vestibulum laoreet pellentesque orci vel mollis. Maecenas vehicula bibendum quam. Nullam ac arcu justo, id pellentesque dolor. Maecenas quis ante felis, at porta neque.</p>
<a href="#" class="scrollToTop">Scroll To Top</a>
</section>
</body>
</html>
以下是完整的解决方案和非常流畅的滚动检查复制代码使测试html文件在浏览器上运行，向下滚动并单击右下角的返回顶部按钮
答案 4 :(得分：0)
在Anchor标签中，你提到了href =＆＃34;＃＆＃34;因此，点击锚标记后会将您带到页面顶部。
删除href =＆＃34;＃＆＃34;您可以检查是否要将标签更改为按钮。