滚动到一个页面的网站

我创建的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> 
    &nbsp; -&nbsp; 
    <a href="#About_Us">About Us</a>   
    &nbsp; -&nbsp; 
    <a href="#Gallery">Gallery</a> 
    &nbsp; -&nbsp;  
    <a href="#Reviews">Reviews</a> 
    &nbsp; -&nbsp; 
    <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>

预先感谢您的支持

来源

2015-09-04 Don 1 Desing

你可以用jQuery库做。首先连接它：

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

然后，绑定菜单链接点击事件一个滚动动画。 I`ve添加类的链接，方便选择：

<a class="menu_link" href="#Home">Home</a> 
    &nbsp; -&nbsp; 
    <a class="menu_link" href="#About_Us">About Us</a>   
    &nbsp; -&nbsp; 
    <a class="menu_link" href="#Gallery">Gallery</a> 
    &nbsp; -&nbsp;  
    <a class="menu_link" href="#Reviews">Reviews</a> 
    &nbsp; -&nbsp; 
    <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);  
    }); 
});

这里是提琴：http://jsfiddle.net/z72ym4n9/1/

来源

2015-09-04 16:59:39

我在标题中添加脚本和函数，但它仍然没有工作 –

控制台中的任何错误？你有没有在HTML部分进行更改？ –

我已经使用这个JavaScript http://alvarotrigo.com/fullPage/#firstPage现在我正在努力做横向滑动 –

你可以使用我的fullPage.js库。这种效果相当流行，而且更加完整。

与旧的浏览器（IE 8，歌剧12）
Touch装置
很多的选择，方法和回调兼容
支持以适当的方式
Great documentation full of examples
更新动力学滚动非常小心地
3年的存在

来源

2015-09-11 09:00:59 Alvaro

滚动到一个页面的网站

回答

相关问题