1. ホーム
  2. 質問と答え
  3. サイトをスクロールするたびにボタンを押しますか？

サイトをスクロールするたびにボタンを押しますか？

2016-04-22 6 views
1

サイトをスクロールするたびにボタンを押しますか？

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek); 
 

 
body 
 
{ 
 
\t background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    font-family:"Helvetica Neue", Helvetica, Sans-serif; 
 
} 
 

 
.matur-image-container { 
 
    overflow-x: visible; 
 
    overflow-y: visible; 
 
    width: 100%; 
 
    color: darkred; 
 
    background-color: white; 
 
    margin-top: -5px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-radius: 30px; 
 
    font-size: 20px; 
 
} 
 

 

 
.food-link { 
 
    margin-right: 0px; 
 
    padding-top: 0px; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    background-image: none; 
 
    background-position: 0% 0%; 
 
} 
 

 

 
.cartbutton 
 
{ 
 
\t border: 1px solid black; 
 
\t border-radius: 5px; 
 
\t background-color: lightblue; 
 
\t text-decoration: none; 
 
\t padding: 10px; 
 
\t margin-bottom: 5px; 
 
} 
 

 
.cartbutton:hover 
 
{ 
 
    background-color: #528881; 
 
    transition: all .30s ease; 
 
} 
 

 
h2 
 
{ 
 
\t color: lightblue; 
 
} 
 

 
.desc 
 
{ 
 
\t margin-top: 40px; 
 
\t text-align: center; 
 
\t font-size: 100px; 
 
\t color: darkred; 
 
} 
 
.cool 
 
{ 
 
\t display: inline-block; 
 
\t width: 100%; 
 
} 
 

 
.topbar 
 
{ 
 
\t position: fixed; 
 
\t top: 0px; 
 
\t width: 100%; 
 
    right: 0px; 
 
\t background-color: tomato; 
 
\t text-align: right; 
 
\t height: 50px; 
 
\t z-index: 100; 
 
} 
 

 
.texti 
 
{ 
 
\t margin-right: 15px; 
 
} 
 

 
.linkur 
 
{ 
 
\t border: 1px solid black; 
 
\t padding: 8.5px; 
 
\t margin-right: 10px; 
 
\t text-decoration: none; 
 
\t border-color: transparent; 
 
\t font-size: 1.3em; 
 
\t color: darkred; 
 
} 
 
.linkur:hover 
 
{ 
 
\t background-color: lightblue; 
 
\t opacity: 0.7; 
 
} 
 

 
label 
 
{ 
 
\t position: fixed; 
 
\t top: -2000px; 
 
} 
 

 
.mynd 
 
{ 
 
\t position: fixed; 
 
\t top: -50px; 
 
\t left:20px; 
 
} 
 

 
.navigation 
 
{ 
 
\t height: 96%; 
 
\t width: 20%; 
 
\t background-color: tomato; 
 
} 
 

 
.logo 
 
{ 
 
\t position: fixed; 
 
\t top: -100px; 
 
} 
 

 
.hlid 
 
{ 
 
    position: fixed; 
 
    left: -2000px; 
 
    width: 700px; 
 
    z-index: 100; 
 
    margin-right: 20px; 
 
} 
 

 
.main 
 
{ 
 
\t position: relative; 
 
\t left: 3%; 
 
\t width: 30%; 
 
\t text-align: center; 
 
\t display:inline-block; 
 
\t margin-right:10px; 
 
\t margin-left:10px; 
 
\t margin-bottom:10px; 
 
} 
 

 

 
.leikjatexti 
 
{ 
 
    border: 1px solid black; 
 
    border-radius: 20px; 
 
    text-decoration: none; 
 
    margin-bottom: 10px; 
 
    padding-top: 5px; 
 
    margin-top: 10px; 
 
    background-color: tomato; 
 
} 
 

 
.text2 
 
{ 
 
\t text-decoration: none; 
 
\t color: darkred; 
 
} 
 

 

 
@media screen and (max-width: 65em){ 
 

 
.main 
 
{ 
 
\t position: relative; 
 
\t left: 10%; 
 
\t width: 40%; 
 
\t text-align: center; 
 
\t display:inline-block; 
 
\t margin-right:10px; 
 
\t margin-left:10px; 
 
\t margin-bottom:10px; 
 
\t margin: 10px; 
 
} 
 
} 
 

 
@media screen and (max-width: 57em){ 
 
.main 
 
{ 
 
\t position: relative; 
 
\t left: 25%; 
 
\t width: 50%; 
 
\t text-align: center; 
 
\t display:inline-block; 
 
\t margin-right:10px; 
 
\t margin-left:10px; 
 
\t margin-bottom:10px; 
 
\t margin: 10px; 
 
} 
 
} 
 

 

 
@media screen and (max-width: 48em){ 
 

 
.desc 
 
{ 
 
\t font-size: 60px; 
 
} 
 
.topbar 
 
{ 
 
\t text-align: left; 
 
} 
 

 
.linkur 
 
{ 
 
\t position: fixed; 
 
\t top: -100px; 
 
} 
 
\t 
 
input { 
 
    display: none; 
 
} 
 
label, 
 
label { 
 
    color: black; 
 
    position: fixed; 
 
    top: 2px; 
 
    left: 5px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 18px; 
 
    transition: all .15s ease; 
 
    font-size: 30px; 
 
    z-index: 100; 
 
} 
 
label:hover { 
 
    color: darkred; 
 
} 
 

 
input:checked ~ .hlid { 
 
    position: fixed; 
 
    left: -50px; 
 
    height: 18%; 
 
    top: 30px; 
 
    transition: all .15s ease; 
 
} 
 
li 
 
{ 
 
\t list-style-type: none; 
 
} 
 

 
.hlidlinkur 
 
{ 
 
\t margin-bottom: 20px; 
 
\t margin-left: 10px; 
 
} 
 

 
.hlidlinkura 
 
{ 
 
\t border: 1px solid black; 
 
\t padding: 7px; 
 
\t text-align: center; 
 
\t border-color: transparent; 
 
\t text-decoration: none; 
 
\t color: darkred; 
 
\t font-size: 1.3em; 
 
\t height: auto; 
 
} 
 

 
.hlidlinkura:hover 
 
{ 
 
\t background-color: lightblue; 
 
} 
 

 
.main 
 
{ 
 
\t position: relative; 
 
\t left: 20%; 
 
\t width: 60%; 
 
\t text-align: center; 
 
\t display:inline-block; 
 
\t margin-right:10px; 
 
\t margin-left:10px; 
 
\t margin-bottom:10px; 
 
\t margin: 10px; 
 
} 
 

 
.leikjatexti 
 
{ 
 
\t height: auto; 
 
} 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script> 
 
      var randnum = Math.random(); 
 
      var inum = 3; 
 
      
 
      var rand1 = Math.round(randnum * (inum-1)) + 1; 
 
      images = new Array 
 
      images[1] = "img/shi.jpg" 
 
      images[2] = "img/halo.jpg" 
 
      images[3] = "img/franklin.jpg" 
 
      
 
      var image = images[rand1] 
 
      
 
     </script> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <meta charset="utf-8"> 
 
     <title>Main site</title> 
 
     <link rel="stylesheet" href="Gru_games.css" type="text/css" /> 
 
    </head> 
 
    <body> 
 
     <script> 
 
      document.write('<body background="' + image + '" text="white">') 
 
      
 
     </script> 
 
     <nav class="topbar"> 
 
      <a href="Gru_main.html"><img class="mynd" src="project.png" alt="photo"></a> 
 
      <ul class="texti"> 
 
       <a href="#" class="linkur">Games</a> 
 
       <a href="#" class="linkur">Profile</a> 
 
       <a href="#" class="linkur">My Cart</a> 
 
      </ul> 
 
     </nav> 
 
     <input type="checkbox" id="toggle"> 
 
     <label for="toggle">&#9776;</label> 
 
     <nav class="hlid"> 
 
      <ul class="navigation"> 
 
       <li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a> 
 
       <li> 
 
       <li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li> 
 
       <li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li> 
 
      </ul> 
 
     </nav> 
 
     <input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
 
     <label for="nav-trigger"></label> 
 
     <h1 class="desc">Games</h1> 
 
     <div class="cool"> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="walking.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>The Walking Dead</h1> 
 
        <a href="#" class="cartbutton">Put in cart</a> \t \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="blackops.png" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Black ops</h1> 
 
        <a href="#" class="cartbutton">Put in cart</a> \t 
 
        <h2>Verð: 9.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="bloodborne.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Bloodborne</h1> 
 
        <a href="#" class="cartbutton">Put in cart</a> 
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="borderlands.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Borderlands</h1> 
 
        <a href="#" class="cartbutton">Put in cart</a> \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="destiny.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Destiny</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="evolve.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Evolve</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> 
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="gta.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>GTA V</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> 
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="nba2k.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>NBA2K16</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="portal2.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Portal 2</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> 
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="rambo.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Rambo</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> 
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="ratchet.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>R&C: A Crack In</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="main"> 
 
       <div class="matur-column showfood"> 
 
        <a class="text2 slideup food-link" href="#"> 
 
         <div class="leikjatexti"> 
 
          <img class="mynd2" src="tombraider.jpg" alt="Walking Dead" height="152" width="120"> 
 
          <h1>Tomb Raider</h1> 
 
        <a href="Gru_main.html" class="cartbutton">Put in cart</a> \t  
 
        <h2>Verð: 4.990kr</h2> 
 
        </div> 
 
        <div class="matur-image-container" style="display: none;"> 
 
         <p class="description">The walking Dead hefur verið Djást telltale síðan að fyrsti leikurinn kom út, leikurinn hefur fengið gríðarlega góða 
 
          dóma frá heim öllum og ekki gerir það verra að þetta sé leikur frá telltale 
 
         </p> 
 
        </div> 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
 
     <img style="border:0;width:88px;height:31px" 
 
      src="http://jigsaw.w3.org/css-validator/images/vcss" 
 
      alt="Valid CSS!" /> 
 
     <img style="border:0;width:88px;height:31px" 
 
      src="http://jigsaw.w3.org/css-validator/images/vcss-blue" 
 
      alt="Valid CSS!" /> 
 
     </a> 
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script type="text/javascript"> 
 
      (function($, undefined) { 
 
       $('.showfood').on('click', function() { 
 
        var $imgBox = $(this).find('.matur-image-container'); 
 
        if($imgBox.css('display') != 'none') { 
 
         $imgBox.slideUp('slow'); 
 
         return; 
 
        } 
 
        var $sibling = $(this).siblings('.showfood'); 
 
        $sibling.find('.matur-image-container').hide(); 
 
        $imgBox.hide(); 
 
        $imgBox.slideDown('slow'); 
 
       }); 
 
      })(jQuery); 
 
     </script> 
 
    </body> 
 
</html>

私はゲームを販売するウェブサイトに取り組んでいますが、私は問題を抱えている、私は最初の3つのゲームをクリックするとサイトが自動的にスクロールしませんが、あなたは押しているとき、下のゲームはサイトがちょうど上がるとあなたが戻ってスクロールする必要がある場合は、私はこの問題を解決する方法はわからない、任意の提案は高く評価されます:)＃を

出典

2016-04-22 Eyþór Þórlindsson

+0

@RayonDabreひどい練習は、 '新しいArray'が構文的に正しいですが。 – Xufox

+0

あなたの '＃ 'アンカーが問題なので、スクロールアップしています。 – Spluf

+0

@Xufox、私は括弧なしで（ '（）'）それは無効ですと思った..ありがとう.. – Rayon

答えて

8

ちょうどアンカー次のようなボタン用のタグ：

<a href="javascript:void(0)" class="cartbutton">Put in cart</a>
アンカータグのhref属性で：

出典

2016-04-22 05:08:05

+0

私にそれを打つ、私はちょうど同じことを入力していた - 'href ="＃ "'が犯人であるように見える。 – alexanderbird

+0

http://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean – Rayon

+0

@ルークP.アイザックコースのハハ私は、感謝を持って気付かなかった：D –

2

次の2つの方法

1でこれを解決することができます）は、「無効（0）のjavascript」を使用する必要があります。関数呼び出しでevent.preventDefault（）関数を使用することにより

2）、ここでは常にトップに戻ってきているのhref "＃" とhttps://api.jquery.com/event.preventdefault/

出典

2016-04-22 05:13:26

+0

または 'href =" javascript：return false; " – Rayon

+0

" return false; "との違いは、と 'e.preventDefault（）;'違いはfalseを返します。その事象がDOMを伝播するのを防ぎます（つまり、 "バブリング"する）事をもう少し受け入れます。 –

+0

あなたは 'e.stopPropogation（）'について話しています。 – Rayon

1

のリンクをご確認ください。

$('a[href^="#"]').click(function(){ 
    var scroll_el = $(this).attr('href'); 
    if ($(scroll_el).length == 0) { 
     return false; 
    } 
});

#が含まれており、同じIDを持つ要素がアンカーのように存在しない場合、それはfalseを返し、リンクを押したときに、この関数が呼び出されます：あなたは、実際のリンクを持っていない間はtemporarely jQueryを使ってそれを無効にすることができます。

出典

2016-04-22 05:16:45 Julia

0

（javascript:void & event.preventDefault()/return false(IE)を持つ）を避けるために、私はそれがリンクとしてボタンとスタイルを使用します。

出典

2016-04-22 05:23:09 Kac

2

あなたがリンクを変更ちょうど守られてからそれらを防ぐためにしたくない場合は、リンクにonclick="false"属性を追加することができます。

<a href="#" class="cartbutton" onclick="return false">Put in cart</a>

これが守られているリンクを防止し、ひいてはではないでしょうあなたをトップに戻す。

参考：this answer

出典

2016-04-22 05:39:11 cst1992

 関連する問題

  • 関連する問題はありません^_^