js"返回顶部"功能实现

JS代码:

<script src="../../static/js/base/jquery/jquery.min.js"></script>

<script>
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$("#sidepanel").fadeOut(100);
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#sidepanel").fadeIn(1000);
}
else
{
$("#sidepanel").fadeOut(1000);
}
});
//当点击跳转链接后,回到页面顶部位置

$("#sidepanel").click(function(){
$(‘body,html‘).animate({scrollTop:0},200);
return false;
});
});
</script>

CSS代码:

<div style="height:1500px;">
      <div id="sidepanel" style="display: block;">
        <a href="javascript:void(0)" class="gotop" href="#top">
        <b></b>
        返回顶部
        </a>
      </div>
</div>

时间: 2024-10-25 14:48:21

js"返回顶部"功能实现的相关文章

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可

[转] JS 返回顶部

仿新浪微博返回顶部的js实现(jQuery/MooTools) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1576 一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具条上:新浪微博的返回顶部在滚动高度大于0的时候显示

前端 css+js实现返回顶部功能

描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button> 3 </div> CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position: f

js+JQuery实现返回顶部功能

在HTML头部添加 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 然后 jquery 中写入 <script>        $(function () {            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失            $(function () {    

原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id: 之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器: 之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度: 再用一个判断语句来判断一下滚动的高度:我们在设置一个数来让按钮什么时候显示: var o

页面返回顶部功能的实现

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <

jquery 实现返回顶部功能

1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scroll事件,即发生scroll事件,则进行按钮的显示隐藏的操作判断. 判断方法是:滚动条垂直高度大于某个值,则显示按钮(show()):否则则隐藏按钮(hide()): 3. 绑定点击返回顶部按钮的事件,给予一个动画,scroll到顶部(可以以body标签的位置作为参考) 例码如下: html: <d

js返回顶部小Demo

<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; background-color: #2F4F4F; text-align: center; color: white; position: fixed; right: 18px; bottom: 18px; } .divT:hover{ cursor: pointer; } .hide { display: none; }