滾動到一個頁面的網站

我創建的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

滾動到一個頁面的網站

回答

相關問題