每次我按下按钮时，网站都会向上滚动
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>我正在一个销售游戏的网站上工作，但我有一个问题，当我点击前 3 款游戏时，该网站不会自动向上滚动，但是当您按下较低的游戏时，该网站会上升，如果您想阅读文本您必须向下滚动，我不知道如何解决这个问题， 任何建议将不胜感激:)
只需更改按钮锚标记中的 href 值，如下所示：
<a href="javascript:void(0)" class="cartbutton">Put in cart</a>
您可以通过两种方式解决此问题
1） 需要在锚标签的 href 属性中使用 'javascript：void（0）'。
2） 通过在函数调用中使用 event.preventDefault（） 函数，检查此处 https://api.jquery.com/event.preventdefault/
如果您不想更改链接，而只是阻止它们被关注，则可以为链接添加onclick="false"属性：
<a href="#" class="cartbutton" onclick="return false">Put in cart</a>
这将防止链接被跟踪，因此不会将您返回到顶部。
参考：这个答案
带有 href "#" 的链接总是返回到顶部。您可以在没有实际链接的情况下暂时使用 JQuery 禁用它：
$('a[href^="#"]').click( function(){
var scroll_el = $(this).attr('href');
if ($(scroll_el).length == 0) {
return false;
}
});
当按下包含 # 的链接时调用此函数，如果没有与锚点中 id 相同的元素，则返回 false。
为了避免（有javascript:void和event.preventDefault()/return false(IE)），我会使用按钮并将其样式设置为链接。
相关文章：
- 在向下滚动JS/HTML/CSS wordpress网站时替换徽标图像
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 网站跟随鼠标滚动
- 像谷歌一样更改滚动网站
- 网站水平滚动，但单独的页面
- 我如何从一个无限滚动的网站抓取图像，其中api是隐藏的，我无法通过使用Inspect Element获得它->网络
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 每次我按下按钮时，网站都会向上滚动
- 在用户滚动时加载单个页面网站的不同部分
- 有没有可能使网站水平和垂直滚动
- 单页，滚动网站与固定的动态页脚
- 为网站滚动添加效果
- 新颂网站 - 滚动时从一个背景图像平滑过渡到下一个背景图像
- 如何使网站滚动背景不移动和工具栏自动最小化
- 启用/禁用iPhone/iPad的滚动，但启用网站滚动
- Nexus 5网站-滚动滑块内的设备-如何做到这一点
- 移动版网站滚动缓慢
- 防止网站滚动的Jquery功能
- 移动网站滚动问题
- 网站滚动问题
