Eyþór Þórlindsson
Reputation: 13
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">☰</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 :)
Upvotes: 1
Views: 126
Answers (5)
cst1992
Reputation: 3931
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
Upvotes: 2
Luke P. Issac
Reputation: 1591
Just change href value in the anchor tag for buttons as follows:
<a href="javascript:void(0)" class="cartbutton">Put in cart</a>
Upvotes: 8
Kac
Reputation: 51
To avoid (having javascript:void & event.preventDefault()/return false(IE)), I would use button and style it as a link.
Upvotes: 0
Julia
Reputation: 1321
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.
Upvotes: 1
Deepak Dholiyan
Reputation: 1912
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/
Upvotes: 2
Related Questions
- How do I make the first letter of a string uppercase in JavaScript?
- How do I return the response from an asynchronous call?
- What is the difference between "let" and "var"?
- What does the !! (double exclamation mark) operator do in JavaScript?
- How to make a div 100% height of the browser window
- What is the most efficient way to deep clone an object in JavaScript?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- How do I disable the resizable property of a textarea?
- Make a div fill the height of the remaining screen space
- How can I know which radio button is selected via jQuery?