Javascriptを表示/非表示にするページトップへ

私はずっとここで多くを読んできましたが、まだ私の問題の解決策を見つけることができなかったので、ここですでに議論したことは投稿しないことを願っています。Javascriptを表示/非表示にするページトップへ

私は、このJavascript機能で表示および非表示にする2つの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にはビューポートの高さがあります。

私は、これが問題を解決するのに十分な情報であることを望みます。そうでない場合は、お気軽にお問い合わせください。

ありがとうございました！

EDIT：HERESにJSFiddle：<buttons>へhttps://jsfiddle.net/vx6vju3c/2/

出典

2017-12-15 etlaM

ライブテストでフィドルやスニペットを共有できますか？ –

あなたはSOがHtml/css/jsベースの問題のためのビルトインサンドボックスを提供していることをご存じでしょうか？私たちが何が間違っているのかを簡単に見分けることができるように、コードを表示するためにそのコードを使用してください。ありがとう！ –

'popup2'のid属性に二重引用符がないことに注意してください。 – LinkinTED

href="#"を削除するか、ここで<button>

出典

2017-12-15 11:48:12 Bahaa

それは私が必要なすべてでした！私はとてもばかげている、非常に感謝します！ – etlaM

変更<a>タグ：

<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>内部タグによるものです。クリックすると常にページの一番上に配置されます。

出典

2017-12-15 11:42:35 S1awek

私は今、！ – etlaM

min-heightから#contentに設定すると便利です。

#content { 
min-height:100px; 
}

出典

2017-12-15 11:44:05 Paul

<!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>

に<a>タグを変更チェックコピーコードのための完全なソリューションと非常にスムーズスクロールしているブラウザ上で実行するテストのhtmlファイルを作成し、スクロールダウンして、右下に戻るトップボタンをクリックしてください

出典

2017-12-15 12:29:29

アンカータグで、あなたはhref = "＃"と記述しました。あなたはアンカータグをクリックするとページの上部に移動します。

href = "＃"を削除して、タグをボタンに変更しないかどうかを確認できます。

出典

2017-12-15 12:47:16

Javascriptを表示/非表示にするページトップへ

答えて

関連する問題