每次按下按钮，网站都会向上滚动？

时间：2016-04-22 05:03:39

标签： javascript html css 

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

body
{
	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
{
	border: 1px solid black;
	border-radius: 5px;
	background-color: lightblue;
	text-decoration: none;
	padding: 10px;
	margin-bottom: 5px;
}

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

h2
{
	color: lightblue;
}

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

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

.texti
{
	margin-right: 15px;
}

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

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

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

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

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

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

.main
{
	position: relative;
	left: 3%;
	width: 30%;
	text-align: center;
	display:inline-block;
	margin-right:10px;
	margin-left:10px;
	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
{
	text-decoration: none;
	color: darkred;
}


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

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

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


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

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

.linkur
{
	position: fixed;
	top: -100px;
}
	
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
{
	list-style-type: none;
}

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

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

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

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

.leikjatexti
{
	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> 		   
                    <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> 	 
                    <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>	   
                    <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>	   
                    <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>	   
                    <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>	   
                    <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>	   
                    <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>

我正在一个销售游戏的网站上工作，但是我有一个问题，当我点击前三个游戏时，该网站不会自动向上滚动，但当你按下较低的游戏时，该网站就会上升如果你想阅读文本你必须向下滚动，我不知道如何解决这个问题，任何建议将不胜感激：）

5 个答案:

答案 0 :(得分：8)

只需更改按钮的锚标记中的href值，如下所示：

<a href="javascript:void(0)" class="cartbutton">Put in cart</a>

答案 1 :(得分：2)

您可以通过两种方式解决此问题

1）需要在锚标记的href属性中使用'javascript：void（0）'。

2）通过在函数调用中使用event.preventDefault（）函数，请在此处查看https://api.jquery.com/event.preventdefault/

答案 2 :(得分：2)

如果您不想更改链接但只是阻止它们被跟踪，您可以在链接中添加onclick="false"属性：

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

这样可以防止链接被跟踪，因此不会将您返回到顶部。

参考：switch

答案 3 :(得分：1)

与href“＃”的链接总是返回顶部。当您没有实际链接时，您可以使用JQuery临时禁用它：

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

当按下包含#的链接时调用此函数，如果没有与锚点中具有相同ID的元素，则返回false。

答案 4 :(得分：0)

为了避免（javascript:void＆amp; event.preventDefault()/return false(IE)），我会使用按钮并将其设置为链接。

相关问题
最新问题