滚动到一个页面的网站
问题描述:
我创建的HTML 一页纸的网站我不知道任何关于JavaScript的,所以请给我做 最简单的方式不同的部分效果,我想有一个滚动效果喜欢这个网站http://www.typeform.com/ 这里是我的代码滚动到一个页面的网站
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a:link { color: white; text-decoration:none}
a:visited { color: white; text-decoration:none}
a:hover { color: red; text-decoration:underline}
a:active { color: red; text-decoration:underline}
.style1 {
border-bottom-width: 0px;
background-color: #000000;
text-align: center;
top:middle;
color:white;
height: 100vh;
font-size: x-large;
}
.Style_Home {
border-width: 0px;
background-color: #000000;
text-align: center;
color: white;
font-size: x-large;
position: fixed;
width: 100%;
font-weight: bold;
}
.Style_Bookmark {
border-width: 0px;
background-color: #000000;
text-align: center;
color: black;
font-size: x-large;
width: 100%;
font-weight: bold;
}
.Style_Footer {
border-width: 0px;
background-color: #000000;
text-align: center;
color: white;
font-size: x-large;
width: 100%;
font-weight: bold;
position: fixed;
bottom: 0;
}
.Style_Footer2 {
border-width: 0px;
background-color: #000000;
text-align: center;
color: white;
font-size: x-large;
font-weight: bold;
width: 100%;
font-weight: bold;
position: relative;
bottom: 0;
}
.style2 {
border-style: none;
border-color: inherit;
border-width: 0px;
background-position: center;
background-repeat: no-repeat;
background-image: url('Images/D1D_Background.png');
background-size: % 100% ;
text-align: center;
color: black;
height: 100vh;
font-size: x-large;
}
.Style_Whole_Page {
margin: 0px;
}
</style>
</head>
<body class="Style_Whole_Page" >
<table style="width: 100%" cellspacing="0" cellpadding="0" align="center" border="0">
<!-- MSTableType="layout" -->
<tr>
<td class="Style_Home" valign="top">
<section>
<strong>
<a href="#Home">Home</a>
-
<a href="#About_Us">About Us</a>
-
<a href="#Gallery">Gallery</a>
-
<a href="#Reviews">Reviews</a>
-
<a href="#Contact_Us">Contact Us</a>
</strong>
</section>
</td>
</tr>
<tr>
<td class="Style_Bookmark" valign="top">
<a name="Home"></a>
<strong>
Home
</strong>
</td>
</tr>
<tr>
<td class="style2">
<section>
... Home ...</section></td>
</tr>
<tr>
<td class="Style_Bookmark" valign="top">
<a name="About_Us"></a>
<strong>
About_Us
</strong>
</td>
</tr>
<tr>
<td class="style1">
... About Us ...</td>
</tr>
<tr>
<td class="Style_Bookmark" valign="top">
<a name="Gallery"></a>
<strong>
Gallerystrong
</strong>
</td>
</tr>
<tr>
<td class="style2">
... Gallery ...</td>
</tr>
<tr>
<td class="Style_Bookmark" valign="top">
<a name="Reviews"><strong></strong></a>
Reviews<strong>
</strong>
</td>
</tr>
<tr>
<td class="style1">
... Reviews ...</td>
</tr>
<tr>
<td class="Style_Bookmark" valign="top">
<a name="Contact_Us"><strong></strong></a>
Contact Us<strong>
</strong>
</td>
</tr>
<tr>
<td class="style2">
... Contact Us ..<br />
</td>
</tr>
<tr>
<td class="Style_Footer" valign="top">
<img alt="Scroll_Dwon" src="Images/Arrow_White.gif" width="30" height="30" onmouseover="this.src='Images/Arrow_Red.gif'" onmouseout="this.src='Images/Arrow_White.gif'"/></td>
</tr>
<tr>
<td class="Style_Footer2" valign="top">... <span lang="FR-HT">©</span> Copyright 2015 ...</td>
</tr>
</table>
</body>
</html>
预先感谢您的支持
答
你可以用jQuery库做。首先连接它:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
然后,绑定菜单链接点击事件一个滚动动画。 I`ve添加类的链接,方便选择:
<a class="menu_link" href="#Home">Home</a>
-
<a class="menu_link" href="#About_Us">About Us</a>
-
<a class="menu_link" href="#Gallery">Gallery</a>
-
<a class="menu_link" href="#Reviews">Reviews</a>
-
<a class="menu_link" href="#Contact_Us">Contact Us</a>
和:
$(document).ready(function() {
$(".menu_link").bind('click', function() {
$("html, body").animate({
scrollTop: $('.Style_Bookmark').eq($(this).index()).offset().top
}, 1000);
});
});
答
你可以使用我的fullPage.js库。这种效果相当流行,而且更加完整。
- 与旧的浏览器(IE 8,歌剧12)
- Touch装置
- 很多的选择,方法和回调兼容
- 支持以适当的方式
- Great documentation full of examples
- 更新动力学滚动非常小心地
- 3年的存在
我在标题中添加脚本和函数,但它仍然没有工作 –
控制台中的任何错误?你有没有在HTML部分进行更改? –
我已经使用这个JavaScript http://alvarotrigo.com/fullPage/#firstPage现在我正在努力做横向滑动 –