整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
到頂部的功能現(xiàn)在基本上是網(wǎng)頁的標(biāo)配了，當(dāng)你已經(jīng)瀏覽到頁面底部時(shí)，一鍵返回頂部的功能確實(shí)非常方便。隨著用戶習(xí)慣的養(yǎng)成，這個(gè)功能都是頁面必備的。那么作為一個(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)主要在頁面頂部放置一個(gè)指定名稱的錨點(diǎn)，然后在頁面下方放置一個(gè)返回到該錨點(diǎn)的鏈接，用戶點(diǎn)擊該鏈接即可返回到該錨點(diǎn)所在的位置。原理和實(shí)現(xiàn)都很簡(jiǎn)單，核心就是通過錨點(diǎn)跳轉(zhuǎn)到指定元素位置，然后把要跳轉(zhuǎn)的元素放到頁面頂部。
scrollTop屬性表示被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。元素未滾動(dòng)時(shí)，scrollTop的值為0，如果元素被垂直滾動(dòng)了，scrollTop的值大于0，且表示元素上方不可見內(nèi)容的像素寬度。可以利用scrollTop來實(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)前頁面的滾動(dò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)的原理類似，在頁面最上方設(shè)置目標(biāo)元素，當(dāng)頁面滾動(dòng)時(shí)，目標(biāo)元素被滾動(dòng)到頁面區(qū)域以外，點(diǎn)擊回到頂部按鈕，使目標(biāo)元素重新回到原來位置，則達(dá)到預(yù)期效果。
關(guān)于實(shí)現(xiàn)回到頂部功能的方法就和大家分享到這里，希望能對(duì)你的工作有幫助。如果你覺得本篇文章對(duì)你有幫助，歡迎點(diǎn)贊，評(píng)論，轉(zhuǎn)發(fā)。
位同學(xué)大家好，開始進(jìn)入到本節(jié)課。通過之前的課程已經(jīng)把浮動(dòng)給徹底的學(xué)完了，很多同學(xué)跟我私信、留言說：老師，我已經(jīng)看完了，覺得好刺激，想要實(shí)戰(zhàn)，想要鍛煉自己，有這樣的感覺是好的。所以從本期開始老師將帶領(lǐng)大家進(jìn)行實(shí)戰(zhàn)，把源碼專區(qū)的界面做出來，進(jìn)行實(shí)戰(zhàn)挑戰(zhàn)自己。
本期課首先要把導(dǎo)航界面一步步的實(shí)現(xiàn)出來。首先來實(shí)現(xiàn)logo的專區(qū)，logo可以打開瀏覽器的f12，然后分析一下它。把鼠標(biāo)移動(dòng)上去過后可以明顯的看見它是一個(gè)mg標(biāo)簽，mg標(biāo)簽是圖片框標(biāo)簽，所以這個(gè)區(qū)域可以用圖片框標(biāo)簽來實(shí)現(xiàn)。
·首先把圖片進(jìn)行儲(chǔ)存，將它儲(chǔ)存到本地，然后將所儲(chǔ)存的標(biāo)簽放到原本的布局的源碼的列表里面去。可以新建文件夾叫做文件或是im、a、t、e，盡量文件夾的起名都用英文好一點(diǎn)，雖然是用中文編程，但是文件夾可以用英文或者是拼音，覺得更標(biāo)準(zhǔn)一點(diǎn)。
·然后對(duì)文件進(jìn)行引用，引用之前首先新建一個(gè)篩選器，篩選器可以把它理解為是一個(gè)分組，新建一個(gè)試點(diǎn)器，比如叫做全局文件logo，它是屬于全局文件，新建一個(gè)全局文件的文件夾。
·然后進(jìn)行引用，打開文件，找到目錄，選擇圖像文件進(jìn)行引用。引用過后再來新建一個(gè)文件夾，這個(gè)文件夾叫做原碼專區(qū)，cs或者是原碼專區(qū)都可以，就叫做原碼專區(qū)。
·然后在原碼專區(qū)里面去新建一個(gè)文件，新建一個(gè)原碼專區(qū)的cs文件，這里點(diǎn)擊lcs，點(diǎn)擊創(chuàng)建。這里創(chuàng)建之前其實(shí)也可以再新建一個(gè)文件夾，這個(gè)文件夾就是cs文件，可以把cs文件放到cs目錄以后，需要加斯cable可以再放到加斯cable的目錄，要把這分目錄的分組做好。
·選擇目錄，將它保存在項(xiàng)目里面的，等一下找到目錄，將它保存項(xiàng)目里面的css文件夾里面，點(diǎn)擊選擇，點(diǎn)擊創(chuàng)建。
·創(chuàng)建過后打開點(diǎn)lcs的文件，將之前所編寫這些布局的cs文件拷貝過去，剪切一下，然后再粘貼過來。粘貼過來過后來進(jìn)行代碼格式化，整理一下，這樣看起來代碼就非常的舒服了。
·然后把標(biāo)簽、樣式標(biāo)簽就可以刪掉了，這樣原代碼可以很清晰的進(jìn)行觀看，cs可能以后會(huì)寫很多cs，原碼主要寫cs就寫這里就好了，atm就寫h n代碼，是不是非常的舒服？
·接下來還要對(duì)cs進(jìn)行引用，雖然創(chuàng)建了cs，但是cs還沒有在h s引用一下就好了，cs文件就屬于h m a的文件了。
·首先還對(duì)頁面進(jìn)行分析，可以看見最基礎(chǔ)布局是可以把最基礎(chǔ)布局先運(yùn)行起來，最基礎(chǔ)布局是頂部導(dǎo)航已經(jīng)把實(shí)現(xiàn)了，其實(shí)頂部的布局是居中的，內(nèi)容是居中的，是從這個(gè)位置開始居中的，所以還要?jiǎng)?chuàng)建一個(gè)居中的盒子在頂部導(dǎo)航里面，都要進(jìn)行居中。
·接下來來實(shí)現(xiàn)這一步，在頂部導(dǎo)航區(qū)域里面新建一個(gè)區(qū)塊盒子，盒子可以在頂部導(dǎo)航這里盡量挨著它，再新建一個(gè)類名，比如叫做居中，叫導(dǎo)航頂部，導(dǎo)頂部導(dǎo)航居中盒子，頂部導(dǎo)航集中盒子更好理解一點(diǎn)。
·寬度之前分析過專區(qū)的寬度是一千一百七十px，就輸一千一百七十px就好了，一千一百七十px高度就不填高度，讓它默認(rèn)去繼承頂部盒子高度。
·改個(gè)背景顏色，方便去查看背景顏色，給它一個(gè)紅色，然后進(jìn)行設(shè)置，類名要記住經(jīng)常性的保存，不保存是不生效的。
·進(jìn)行設(shè)置，點(diǎn)擊運(yùn)行，可以看見運(yùn)行過后目前為止是沒有效果的，可以再次打開代碼來看一下，寬度一千一百七十px，背景顏色為紅色，但是沒有生效，可以給它指定個(gè)高度，指定高度為五十五px，運(yùn)行起來看一下，有效果，現(xiàn)在是有效果的。
·有效果過后先讓它進(jìn)行居中，比如背景居中是外邊距，首先是零ps，自動(dòng)就居中了，運(yùn)行起來是不是居中了？
·然后就可以在盒子里面去寫logo圖片了，首先來分析下logo圖片，用f4，打開開發(fā)者工具，點(diǎn)擊這里，鼠標(biāo)移動(dòng)上去，可以看見圖片的寬度和高度是多少，這里有顯示，圖片下面都有顯示，是八十的寬，三十的高。
·所以這個(gè)時(shí)候可以打出一個(gè)圖片框，在這里打出一個(gè)圖片框，這個(gè)圖片框的圖片地址就是logo，文件logo。
·這個(gè)時(shí)候設(shè)置一下圖片框的寬度和高度，可以這樣寫，可以直接點(diǎn)上面盒子名稱，點(diǎn)圖片框，這么寫的含義就是指定類名下面的圖片框。這個(gè)方式之前是沒有學(xué)習(xí)過，給大家講一下。
·通過類名，比如指定一個(gè)類名指定的盒子，盒子下面的所有的組件都可以通過類名，類名點(diǎn)某一個(gè)組件名稱來進(jìn)行指定，理解吧？比如這里是類名是這個(gè)，頂部導(dǎo)航居中盒子，類名點(diǎn)頂部導(dǎo)航居中盒子，給個(gè)空格，名稱就是組建名，圖片框的名稱，可以設(shè)置它的一些屬性了。
·比如設(shè)它的寬度為八十px，高度三十px，可以運(yùn)行起來看一下效果，點(diǎn)擊運(yùn)行，是不是有個(gè)圖片框，這就顯示到八十和三十，把紅色刪掉，紅色的背景刪掉，是不是八十、三十，看起來很舒服。
·接下來要讓它進(jìn)行居中，既然讓它進(jìn)行居中，其實(shí)也很簡(jiǎn)單，只需要設(shè)置它的外面就好了。首先要進(jìn)行分析，它的高度是三十px，而這個(gè)副組件盒子的高度是五十五px，就是五十五px，要經(jīng)常做計(jì)算，要嚴(yán)格一點(diǎn)來做計(jì)算，五十五減去三十就等于二十五px，二十五px就可以除以二。
·比如上邊距是十五點(diǎn)，十二點(diǎn)五px，下邊距是十二點(diǎn)五px，所以直接指定一個(gè)外邊距，外邊距第一個(gè)參數(shù)是上下，十二點(diǎn)五px，左右零px，這樣就好了，點(diǎn)擊運(yùn)行，可以看見是不是就居中了。
本節(jié)課就簡(jiǎn)單的先實(shí)現(xiàn)這樣的logo效果，下節(jié)課再來實(shí)現(xiàn)，比如像這里面的導(dǎo)航的效果，一步步來實(shí)現(xiàn)。本節(jié)課到此結(jié)束，下節(jié)課再見。
效果
語法： 類選擇器名稱 { }
語法：標(biāo)簽名 { }
常見的行內(nèi)元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其 中<span>是最典型的行內(nèi)元素
行內(nèi)元素的特點(diǎn)：
1、相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)。
2、高度，寬度直接設(shè)置無效
3、寬度默認(rèn)是本身內(nèi)容的寬度
4、行內(nèi)元素只能容納文本或其它行內(nèi)元素
注意：
1、鏈接里不能再放其它鏈接
2、特殊情況<a>鏈接里面可以放塊級(jí)元素，但是給<a>轉(zhuǎn)換一下塊級(jí)模式最安全。
常見的塊元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的塊元素
塊元素的特點(diǎn)：
1、獨(dú)占一行。
2、高度，寬度，外邊距以及內(nèi)邊距都可以控制。
3、寬度默認(rèn)是容器（父級(jí)容器的100%）
4、是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級(jí)元素
注意：
1、文字類的元素內(nèi)不能使用塊級(jí)元素
2、<p>標(biāo)簽主要用于存放文字，因此<p>里面不能放塊級(jí)元素，特別是不能放<div>
3、同理,<h1>--<h6>等都是文字類塊級(jí)元素，里面也不能放其它塊級(jí)元素
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
