整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
avaScript
在我們制作html網(wǎng)頁(yè)的時(shí)候，有時(shí)候需要某個(gè)元素（比如說div）的滾動(dòng)條一直在最下方，那么我們?cè)撛趺醋瞿兀?/p>
先上代碼：
window.onload = SetScroll;// 不要括號(hào)
function SetScroll(){
//讀取需要設(shè)定的元素高度
var height=$("#showwindows")[0].scrollHeight;
//設(shè)置元素的滾動(dòng)條位置在高度數(shù)據(jù)地方就是最下方
$("#showwindows").scrollTop(height);
}
程序執(zhí)行流程如下：
1、頁(yè)面加載時(shí)自動(dòng)調(diào)用JavaScript中的SetScroll方法；
2、設(shè)置height為需要設(shè)置滾動(dòng)條元素的高度；
3、設(shè)置元素的滾動(dòng)條位置為元素高度，就是元素的最下方位置。
到頂部的功能現(xiàn)在基本上是網(wǎng)頁(yè)的標(biāo)配了，當(dāng)你已經(jīng)瀏覽到頁(yè)面底部時(shí)，一鍵返回頂部的功能確實(shí)非常方便。隨著用戶習(xí)慣的養(yǎng)成，這個(gè)功能都是頁(yè)面必備的。那么作為一個(gè)前端開發(fā)者，我們?nèi)绾螌?shí)現(xiàn)這個(gè)實(shí)用又酷炫的功能呢？今天小編幫大家匯總了五種實(shí)現(xiàn)方法，覺得有用記得點(diǎn)贊，轉(zhuǎn)發(fā)哦。
使用錨點(diǎn)鏈接是一種簡(jiǎn)單的返回頂部的功能實(shí)現(xiàn)。該實(shí)現(xiàn)主要在頁(yè)面頂部放置一個(gè)指定名稱的錨點(diǎn)，然后在頁(yè)面下方放置一個(gè)返回到該錨點(diǎn)的鏈接，用戶點(diǎn)擊該鏈接即可返回到該錨點(diǎn)所在的位置。原理和實(shí)現(xiàn)都很簡(jiǎn)單，核心就是通過錨點(diǎn)跳轉(zhuǎn)到指定元素位置，然后把要跳轉(zhuǎn)的元素放到頁(yè)面頂部。
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。元素未滾動(dòng)時(shí)，scrollTop的值為0，如果元素被垂直滾動(dòng)了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度?？梢岳胹crollTop來實(shí)現(xiàn)回到頂部的功能，修改body的scrollTop。示例如下：
scrollTo(x,y)是js原生的方法，作用是滾動(dòng)當(dāng)前window中顯示的文檔至（x,y）點(diǎn)。這是很常用的一種方法，設(shè)置scrollTo(0,0)就可以實(shí)現(xiàn)回到頂部的效果。示例如下：
scrollBy(x,y)方法滾動(dòng)當(dāng)前window中顯示的文檔，x和y指定滾動(dòng)的相對(duì)量。只要把當(dāng)前頁(yè)面的滾動(dòng)長(zhǎng)度作為參數(shù)，逆向滾動(dòng)，則可以實(shí)現(xiàn)回到頂部的效果。
5.scrollIntoView()
Element.scrollIntoView方法可以滾動(dòng)當(dāng)前元素，使其進(jìn)入瀏覽器的可見區(qū)域。該方法可以接受一個(gè)布爾值作為參數(shù)。如果為true，表示元素的頂部與當(dāng)前區(qū)域的可見部分的頂部對(duì)齊（前提是當(dāng)前區(qū)域可滾動(dòng)）；如果為false，表示元素的底部與當(dāng)前區(qū)域的可見部分的尾部對(duì)齊（前提是當(dāng)前區(qū)域可滾動(dòng)）。如果沒有提供該參數(shù)，默認(rèn)為true。
使用該方法的原理與使用錨點(diǎn)的原理類似，在頁(yè)面最上方設(shè)置目標(biāo)元素，當(dāng)頁(yè)面滾動(dòng)時(shí)，目標(biāo)元素被滾動(dòng)到頁(yè)面區(qū)域以外，點(diǎn)擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果。
關(guān)于實(shí)現(xiàn)回到頂部功能的方法就和大家分享到這里，希望能對(duì)你的工作有幫助。如果你覺得本篇文章對(duì)你有幫助，歡迎點(diǎn)贊，評(píng)論，轉(zhuǎn)發(fā)。
高興鐵鐵們能來看html網(wǎng)頁(yè)設(shè)計(jì)第二期~~~~撒花~~~~~
哎呀呀~實(shí)在是抱歉?jìng)渥?biāo)簽我記錯(cuò)了QAQ
<!--內(nèi)容打這里-->這個(gè)才是備注標(biāo)簽不是//
首先我們先來學(xué)習(xí)上節(jié)課留下的劇透，分別是:
有人就說了標(biāo)題標(biāo)簽上次劇透不就只有h1標(biāo)簽嗎?
嘿嘿，其實(shí)他還有兄弟姐妹啦~
看圖，代碼是從上往下從左往右執(zhí)行的請(qǐng)記住這個(gè)順序哦~
還有,左邊是代碼右邊是網(wǎng)頁(yè)上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁(yè)面標(biāo)題</title>
</head>
<body>
<!--標(biāo)題標(biāo)簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示，h1標(biāo)簽是最大的，h6標(biāo)簽是最小的
是不是很簡(jiǎn)單呀,現(xiàn)在已經(jīng)學(xué)會(huì)了一個(gè)知識(shí)點(diǎn)了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬(wàn)要記住內(nèi)容是寫在標(biāo)簽里面的哦~-->
<!--段落標(biāo)簽是獨(dú)占一條的哦-->
<p>第一條p標(biāo)簽</p>
<p>第二條p標(biāo)簽</p>
<p>第三條p標(biāo)簽</p>
</body>
</html>
鏈接標(biāo)簽是什么?顧名思義就是一個(gè)鏈接看代碼：
<a href="https://www.baidu.com">百度</a>
href是什么東西?。渴莂標(biāo)簽的屬性啦~里面用來輸入你需要跳轉(zhuǎn)到的網(wǎng)頁(yè)的鏈接
屬性里面的東西是不會(huì)出現(xiàn)在網(wǎng)頁(yè)上面的出現(xiàn)的只有在a標(biāo)簽里面的內(nèi)容哦
當(dāng)我點(diǎn)擊百度這兩個(gè)字后就給我跳轉(zhuǎn)到了我們href屬性里面的https://www.baidu.com
當(dāng)然我們也可以跳轉(zhuǎn)到我們自己制作的網(wǎng)頁(yè)上面但要求是同一個(gè)項(xiàng)目下面的網(wǎng)頁(yè)
是不是很有趣~
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點(diǎn)擊鏈接后就跳轉(zhuǎn)到了山這個(gè)網(wǎng)頁(yè)出現(xiàn)了一張山的圖片，是不是有點(diǎn)小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉(zhuǎn)到山的網(wǎng)頁(yè)</a><!--只有同一個(gè)項(xiàng)目下面的網(wǎng)頁(yè)才能相互跳轉(zhuǎn)-->
</body>
</html>
圖像標(biāo)簽標(biāo)簽如其意，就是用來上傳圖像的一個(gè)標(biāo)簽~~
我們這里介紹一下img的兩個(gè)屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的，他會(huì)根據(jù)地址去找圖片然后把圖片放到網(wǎng)頁(yè)上面。
alt有什么用啊就是當(dāng)圖片顯示失敗的時(shí)候就會(huì)顯示alt里面的文字
看視頻:
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后，就會(huì)顯示一個(gè)圖片錯(cuò)誤的圖標(biāo)和alt里面的內(nèi)容
怎么拖圖片到img文件下，老師~~~我不知道
看視頻
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進(jìn)來就ok了是不是很簡(jiǎn)單~
okk，好快啊怎么一下就學(xué)完了今天的知識(shí)點(diǎn)~~~
嘻嘻今天可是有作業(yè)的~
請(qǐng)根據(jù)下面的網(wǎng)頁(yè)仿寫一下:
完成后作業(yè)發(fā)再評(píng)論區(qū)哦，有什么不懂的可以留言包回答的。
加油呀，每天學(xué)一點(diǎn)爭(zhēng)取做出屬于自己的一個(gè)網(wǎng)頁(yè)~
上一期
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
