0
私はCodePenでデモを作成しました。ボックスをクリックするとボックスのコンテンツが表示され、ウィンドウがウィンドウの下にスクロールします。次に、下部の角のボックスをクリックして閉じます。問題は、メインボックスを2回クリックすると、ウィンドウがページの上部にスクロールするということです。なぜこうなった？また、このコードを書くための短い方法がありますか？トップページのスクロールを停止するjQuery
https://codepen.io/Reece_Dev/pen/NjQvdv
$(document).ready(function(){
$("#link_1").click(function(){
$("#cont_1").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_1").offset().top
}, 500);
$("#close_btn1").click(function(){
$("#cont_1").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_1").offset().top
}, 500);
});
});
$("#link_2").click(function(){
$("#cont_2").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_2").offset().top
}, 500);
$("#close_btn2").click(function(){
$("#cont_2").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_2").offset().top
}, 500);
});
});
$("#link_3").click(function(){
$("#cont_3").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_3").offset().top
}, 500);
$("#close_btn3").click(function(){
$("#cont_3").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_3").offset().top
}, 500);
});
});
$("#link_4").click(function(){
$("#cont_4").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_4").offset().top
}, 500);
$("#close_btn4").click(function(){
$("#cont_4").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_4").offset().top
}, 500);
});
});
});*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
#head{
height: 600px;
}
#link_cont{
text-align: center;
font-size: 0;
}
.links{
cursor: pointer;
display: inline-block;
height: 500px;
width: 25%;
}
#link_1{
background-color: blue;
}
#link_2{
background-color: red;
}
#link_3{
background-color: yellow;
}
#link_4{
background-color: pink;
}
#cont_1 p{
background-color: lightblue;
}
#cont_2 p{
background-color: tomato;
}
#cont_3 p{
background-color: lightyellow;
}
#cont_4 p{
background-color: lightpink;
}
.hide{
display: none;
position: relative;
}
.show{
display: block;
}
.close{
pointer: cursor;
width: 50px;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
background-color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head"></div>
<div id="link_cont">
<div class="links" id="link_1"></div>
<div class="links" id="link_2"></div>
<div class="links" id="link_3"></div>
<div class="links" id="link_4"></div>
</div>
<div id="cont_1" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn1"></div>
</div>
<div id="cont_2" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn2"></div>
</div>
<div id="cont_3" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn3"></div>
</div>
<div id="cont_4" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn4"></div>
</div>
私には[OK]を動作するようです。 –
ちょうどそれがここではうまく動作することに気づいたが、ここではないhttps://codepen.io/Reece_Dev/pen/NjQvdv – Reece
あなたのcodepenもうまく動作する。これは機能しますか？ https://codepen.io/mcoker/pen/MmNOPv –