頁面回到頂部的實現及原理

時間 2019-11-09

標籤頁面回到頂部實現原理简体版

原文原文鏈接

1、原理javascript

監聽當前頁面滾動事件
當滾動到必定像素顯示回到頂部的按鈕
給回到頂部按鈕綁定點擊事件，點擊按鈕讓滾動條回到頂部並隱藏按鈕

2、實現代碼css

<!DOCTYPE HTML>html

<html>java

<head>jquery

<meta http-equiv="content-type" content="text/html; charset=utf-8" />ajax

<title>回到頂部demo</title>api

<style type="text/css"> .up{ position:fixed; bottom:20px; right:20px; width:10px; display:none; } </style>ide

</head>動畫

<body>ui

<div style="background:rgb(200,200,200);height:2000px;">我很長</div>

<a id="up" href="javascript:;" class="up">回到頂部</a>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

//綁定頁面滾動事件

$(window).bind('scroll',function(){

var len=$(this).scrollTop();

if(len>=100){

//顯示回到頂部按鈕

$('#up').show();

}else{

//影藏回到頂部按鈕

$('#up').hide();

}

})

//綁定回到頂部按鈕的點擊事件

$('#up').click(function(){

//動畫效果，平滑滾動回到頂部

$(document).animate({ scrollTop: 0 });

//不須要動畫則直接

//$(document).scrollTop(0) })

</script>

</html>

相關文章

相關標籤/搜索

原理與實現

紅包項目實戰

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<