快捷導(dǎo)航

js實(shí)現(xiàn)返回頂部效果

更新時(shí)間：2017年03月10日 10:50:32 作者：sosojie

本文主要介紹了js實(shí)現(xiàn)返回頂部效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

話不多說(shuō)，請(qǐng)看代碼：

<!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-Type" content="text/html; charset=utf-8" />
<title>JS點(diǎn)擊按鈕到頁(yè)面最底部/返回頁(yè)面頂部代碼</title>
<style type="text/css">
 #back-to-top{ position: fixed; bottom: 50px; right: 10%; }
</style>
</head>
<body>
<div style="height: 3000px;"></div>
<div id="back-to-top">
 <a href="#top" rel="external nofollow" >返回頂部</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  //首先將#back-to-top隱藏
  $("#back-to-top").hide();
  //當(dāng)滾動(dòng)條的位置處于距頂部100像素以下時(shí)，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
  $(function () {
    $(window).scroll(function(){
    if ($(window).scrollTop()>100){
    $("#back-to-top").fadeIn(100);
    }
    else
    {
    $("#back-to-top").fadeOut(100);
    }
    });
    //當(dāng)點(diǎn)擊跳轉(zhuǎn)鏈接后，回到頁(yè)面頂部位置
    $("#back-to-top").click(function(){
    $('body,html').animate({scrollTop:0},"speed");
    return false;
    });
    });
    });
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的省市縣三級(jí)聯(lián)動(dòng)效果,以完整實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-02-02
js常用代碼段收集
以下是平時(shí)收集的幾個(gè)常用代碼段，大多數(shù)是從網(wǎng)上搜集而來(lái)。也均為未找到是誰(shuí)誰(shuí)原創(chuàng)，是否允許轉(zhuǎn)載等要求，所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫(xiě)的，還請(qǐng)?jiān)徳谙罗D(zhuǎn)帖出來(lái)。
2011-10-10
js實(shí)現(xiàn)隨機(jī)數(shù)小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)數(shù)小游戲，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
微信小程序?qū)崿F(xiàn)比較功能的方法匯總(五種方法)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)比較功能的方法，本文給大家列舉出五種方式，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉(zhuǎn)效果實(shí)現(xiàn)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
javascript打印大全(打印頁(yè)面設(shè)置/打印預(yù)覽代碼)
打印頁(yè)面設(shè)置,打印頁(yè)面預(yù)覽在打印過(guò)程中經(jīng)常會(huì)遇到，網(wǎng)上搜集整理了一些實(shí)用的打印方法與大家分享，感興趣的朋友可以了解下哈
2013-03-03
uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果的相關(guān)資料,tabs切換無(wú)論是在app端還是小程序或者H5頁(yè)面都是很常見(jiàn)的功能,文中通過(guò)實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下
2023-07-07
JavaScript 應(yīng)用類庫(kù)代碼
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 轉(zhuǎn)載傳播請(qǐng)保留版權(quán)
2008-06-06
Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-03-03
防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方法
這篇文章主要介紹了防止頁(yè)面url緩存中ajax中post請(qǐng)求的處理方式的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下
2017-10-10