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滾動不起作用

回答

相關問題