HTML Question

Everytime i press a button the site scrolls up?



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





emphasized text

I am working on a website that sells games, but i have a problem, when click on the first 3 games the site doesn't automatically scroll up, but when you are pressing the lower games the site just goes up and if you wanna read the text you have to scroll back down, i don't know how to fix this problem, any suggestion would be appreciated :)

Answer

Just change href value in the anchor tag for buttons as follows:

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