Question

我正在用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>

提前感谢您的支持

Answer 1

您可以使用jquery库来完成它。首先连接它：

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

然后，绑定菜单链接单击事件滚动动画。我已经为您的链接添加了类，以便于选择：

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

将效果滚动到单页网站的不同部分

1 个答案: