Question

我使用了this脚本但是当我把它放到我的网站上时它不会工作。

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以及另一个文件，但它仍然无法正常工作

Answer 1

为下面的每个锚点使用脚本使用单独的函数并将其放在</body>标记之前

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

当然为了让这个工作起作用，你必须给你的分区提供与锚点href属性相同的id，并在你文档的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

Answer 2

您的页面应如下所示

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

JQuery滚动无法工作

2 个答案: