Everytime I press a button the site scrolls up?

Question

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

I am working on a website that sells games, but I have a problem, when I 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 :)

@RayonDabre Although terrible practice, `new Array` is syntactically correct. — Sebastian Simon, Apr 22 '16 at 05:08
your `#` anchors are the problem, that's why it's scrolling up. — Spluf, Apr 22 '16 at 05:09
@Xufox, Oops.. I thought without parenthesis(`()`) it is invalid.. Thanks.. — Rayon, Apr 22 '16 at 05:10
Your ` ` is not on the first line. It has to be, otherwise your document is not HTML5. — cst1992, Apr 22 '16 at 05:16

Luke P. Issac · Accepted Answer · 2016-04-22T05:44:50.800

8

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

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

edited Apr 22 '16 at 05:44

answered Apr 22 '16 at 05:08

Luke P. Issac

1,471
15
32

beat me to it, I was just typing out the same thing - it looks like the `href="#"` is the culprit. – alexanderbird Apr 22 '16 at 05:08
@Luke P. Isaac of course haha i didn't notice i had that, thanks :D – Eyþór Þórlindsson Apr 22 '16 at 05:14
:) :) Yes href="#" is the culprit – Luke P. Issac Apr 22 '16 at 05:16
@EyþórÞórlindsson I think you should read [bobince's answer](http://stackoverflow.com/a/1293130/4037019) in Rayon's linked question: it recommends against this answer. Convincingly. – cst1992 Apr 22 '16 at 05:35
Yup, it's quite convincing. It suggests to return false on click of it. – Luke P. Issac Apr 22 '16 at 05:41

score 2 · Answer 2 · answered Apr 22 '16 at 05:13

2

You can solve this in two ways

1) Need to use 'javascript:void(0)' in href attribute of anchor tag.

2) By using event.preventDefault() function in function call, check here https://api.jquery.com/event.preventdefault/

answered Apr 22 '16 at 05:13

Deepak Dholiyan

1,774
1
20
35

Or `href="javascript:return false;"` – Rayon Apr 22 '16 at 05:20
The difference between 'return false;' and 'e.preventDefault();' The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM – Deepak Dholiyan Apr 22 '16 at 05:23
You are talking about `e.stopPropogation()` – Rayon Apr 22 '16 at 05:24

score 2 · Answer 3 · edited May 23 '17 at 12:16

2

If you don't want to change the links but just prevent them from being followed, you could add a onclick="false" attribute to the links:

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

This'll prevent the link being followed and hence not return you to the top.

Reference: this answer

edited May 23 '17 at 12:16

Community

1
1

answered Apr 22 '16 at 05:39

cst1992

3,823
1
29
40

score 1 · Answer 4 · answered Apr 22 '16 at 05:16

Links with href "#" are always returning to top. You can temporarely disable it with JQuery while you don't have actual link:

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

This function is called when pressing link that contains # and if there is no element with same id as in anchor, it returns false.

score 0 · Answer 5 · answered Apr 22 '16 at 05:23

0

To avoid (having javascript:void & event.preventDefault()/return false(IE)), I would use button and style it as a link.

answered Apr 22 '16 at 05:23

Kac

51
8

Everytime I press a button the site scrolls up?

5 Answers5