JQuery滚动不起作用

-1

我使用this脚本，但是当我把它放到我的网站它不会工作。JQuery滚动不起作用

HTML：

<div id="header"> 
<span id="title">Sidtitel</span> 
<span id="menu"> 
<span>-</span> 
<a onclick="Home()">Hem</a> 
<span>-</span> 
<a onclick="About()">Om sidan</a> 
<span>-</span> 
<a href="#tavling">Tävlingar</a> 
<span>-</span> 
<a href="#doantion">Donation</a> 
<span>-</span> 
<input type="text" placeholder="Skriv in sök!" id="search-input"> 
<input type="button" value="Sök" id="search-button"> 
</span> 
<div id="content"> 
<div id="title">Vad kommer att hända här ?</div> 
<div id="text"> 
Här på sidan kommer jag lägga ut tävlingar där man gör en bra<br> 
sak och ni som joinar kan vinna lite fina priser.<br><br> 
Sen kan ni donera en slant så jag kan köpa in lite priser och 
tävla ut till er.<br> 
</div> 
</div> 
</div> 
<div id="om"> 
ssss 
</div>

CSS：

html { 
font-size: 16px; 
} 
body { 
font-size: 62.5%; /* 10px = 1em */ 
margin: 0; 
overflow-x: hidden; 
overflow-y: hidden; 
} 
#header , #om { 
background: -webkit-linear-gradient(bottom, #000 0%,#111 100%); 
text-align: center; 
height: 100%; 
} 
#header , #menu { padding-left: 20px; } 
#header #title { 
color: #fff; 
font-size: 6em; 
font-family: Oswald; 
} 
#menu { 
padding-left: 25px; 
} 
#menu a , #menu span { 
color: #fff; 
font-size: 3em; 
font-family: Oswald; 
text-decoration: none; 
padding-right: 10px; 
cursor: pointer; 
} 
#menu a:hover { color: #c4112c; } 
#content #title { 
color: #c4112c; 
font-size: 5em; 
margin-top: 200px; 
} 
#content #text { 
width: 50%; 
text-align: left; 
margin-right: auto; 
margin-left: auto; 
font-size: 4em; 
font-family: Oswald; 
color: #fff; 
}

JS：

function about(){ 
$('html,body').animate({ 
scrollTop: $("#om").offset().top 
}, 800); 
}

为什么不是为我工作的JavaScript代码？我试图把javscript在header - 标签和的body并在不同的文件，但它仍然无法工作使用单独的函数之下的每个锚使用脚本

来源

2014-07-19 Liam Rabe

你有没有PU在''标签内吗？ – JiFus

您正在尝试使用大写'A'调用'About（）'，而您正在定义名为'about'的函数。 – m90

你的页面看起来应该像这样

<!doctype html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script> 
$(document).ready(about); 

function about(){ 
    $('html,body').animate({ 
     scrollTop: $("#om").offset().top 
     }, 800); 
} 
</script> 
<style> 
html { 
font-size: 16px; 
} 
body { 
font-size: 62.5%; /* 10px = 1em */ 
margin: 0; 
overflow-x: hidden; 
overflow-y: hidden; 
} 
#header , #om { 
background: -webkit-linear-gradient(bottom, #000 0%,#111 100%); 
text-align: center; 
height: 100%; 
} 
#header , #menu { padding-left: 20px; } 
#header #title { 
color: #fff; 
font-size: 6em; 
font-family: Oswald; 
} 
#menu { 
padding-left: 25px; 
} 
#menu a , #menu span { 
color: #fff; 
font-size: 3em; 
font-family: Oswald; 
text-decoration: none; 
padding-right: 10px; 
cursor: pointer; 
} 
#menu a:hover { color: #c4112c; } 
#content #title { 
color: #c4112c; 
font-size: 5em; 
margin-top: 200px; 
} 
#content #text { 
width: 50%; 
text-align: left; 
margin-right: auto; 
margin-left: auto; 
font-size: 4em; 
font-family: Oswald; 
color: #fff; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<span id="title">Sidtitel</span> 
<span id="menu"> 
<span>-</span> 
<a onclick="Home()">Hem</a> 
<span>-</span> 
<a onclick="About()">Om sidan</a> 
<span>-</span> 
<a href="#tavling">Tävlingar</a> 
<span>-</span> 
<a href="#doantion">Donation</a> 
<span>-</span> 
<input type="text" placeholder="Skriv in sök!" id="search-input"> 
<input type="button" value="Sök" id="search-button"> 
</span> 
<div id="content"> 
<div id="title">Vad kommer att hända här ?</div> 
<div id="text"> 
Här på sidan kommer jag lägga ut tävlingar där man gör en bra<br> 
sak och ni som joinar kan vinna lite fina priser.<br><br> 
Sen kan ni donera en slant så jag kan köpa in lite priser och 
tävla ut till er.<br> 
</div> 
</div> 
</div> 
<div id="om"> 
ssss 
</div> 
</body> 
</html>

来源

2014-07-19 19:02:05 Nate

insted的，只是之前把它在</body>标签

<script> 
    $(function() { 
    $('#menu a').click(function(e) { 
     e.preventDefault(); 
     $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' }, 800, 'linear'); 
    }); 
    }); 
</script>

当然

得到这个工作，你必须给ID对你的部门一样锚的href属性，并在您的文档如的head部分jQuery库

<head> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
</head>

，如果你想脚本滚动到顶部的按钮

<script> 
    $(function() { 
    $('#scroll-top').click(function() { 
     $('html, body').animate({ scrollTop: '0' }, 800, 'linear'); 
    }); 
    }); 
</script>

反正这里是一个FIDDLE

来源

2014-07-19 19:01:30 mdesdev

我必须问：你如何创建小提琴按钮？谢谢 –

@JackWilliam'** [FIDDLE]（http://jsfiddle.net）**' – mdesdev

很酷，谢谢。 :-) –

JQuery滚动不起作用

回答

相关问题