js實現(xiàn)返回頂部效果
更新時間：2017年03月10日 10:50:32 作者：sosojie
本文主要介紹了js實現(xiàn)返回頂部效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
話不多說，請看代碼：
<!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點擊按鈕到頁面最底部/返回頁面頂部代碼</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();
//當滾動條的位置處于距頂部100像素以下時，跳轉(zhuǎn)鏈接出現(xiàn)，否則消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(100);
}
else
{
$("#back-to-top").fadeOut(100);
}
});
//當點擊跳轉(zhuǎn)鏈接后，回到頁面頂部位置
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},"speed");
return false;
});
});
});
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
js實現(xiàn)簡單的省市縣三級聯(lián)動效果實例
這篇文章主要介紹了js實現(xiàn)簡單的省市縣三級聯(lián)動效果,以完整實例形式分析了JavaScript實現(xiàn)省市縣三級聯(lián)動效果的具體步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-02-02
以下是平時收集的幾個常用代碼段，大多數(shù)是從網(wǎng)上搜集而來。也均為未找到是誰誰原創(chuàng)，是否允許轉(zhuǎn)載等要求， 所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫的，還請原諒在下轉(zhuǎn)帖出來。2011-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機數(shù)小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
微信小程序?qū)崿F(xiàn)比較功能的方法匯總(五種方法)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)比較功能的方法，本文給大家列舉出五種方式，每種方法通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript圖片旋轉(zhuǎn)效果實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
打印頁面設置,打印頁面預覽在打印過程中經(jīng)常會遇到，網(wǎng)上搜集整理了一些實用的打印方法與大家分享，感興趣的朋友可以了解下哈2013-03-03
這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)tabs切換(可滑動)效果的相關(guān)資料,tabs切換無論是在app端還是小程序或者H5頁面都是很常見的功能,文中通過實例代碼介紹的很詳細,需要的朋友可以參考下2023-07-07
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 轉(zhuǎn)載傳播請保留版權(quán)2008-06-06
Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了防止頁面url緩存中ajax中post請求的處理方式的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10