`
endual
  • 浏览: 3559178 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JS 页面滑动 底部 顶部

    博客分类：
  • html
 
阅读更多

网页添加页面滑动按钮(回到顶部、底部、暂停滑动)

 

终于基本完成了（请看向页面最右边→_→），虽然还是有不足，但是基本能用的了。

存在的不足：

1.没有实现动态设定滑动用时（你可以把浏览器滑动条拉下一点和拉到底，你会发现运动速度不一样）。

2.当你按下滑动按钮后，在动画结束前无法自由拖动浏览器滑动条到其他地方。

这来两个问题都跟滑动条有关。。。主要是滑动条的属性值取得问题我一直解决不了。

 

下面写一下大概要添加的代码吧。很简单的描述了一下，如果还有不懂的可以到w3school查找相关资料或私信本人。

 

 

第一步：

<div id="top_and_bottom">
    <div id="hightotop"></div>
    <div id="slowtotop"></div>
    <div id="stopbtn"></div>
    <div id="slowtobottom"></div>
    <div id="hightobottom"></div>
</div>

 

添加位置：网页的整体<head>和</head>之间任意位置

 

 

 

第二步：

Ok，我们创建了空间，那下一步就是利用这空间来显示你的按钮了。

 

<STYLE type="text/css">
                                                                                                                                                                                
  #top_and_bottom{position:fixed;bottom:33%;right:0%;display:block;z-index:100;} 
                                                                                                                                                                        
   #hightotop{ background:url("图片地址") no-repeat;
        position:relative; 
        filter:alpha(opacity=70);       /*IE*/
        -moz-opacity:0.7;             /* Moz + FF */
        opacity: 0.7;               /* 支持CSS3的浏览器（FF 1.5也支持）*/
        cursor:pointer;
        height:16px;
        width:27px;
        margin:20px 0;}
                                                                                                                                                                                
    #slowtotop{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:0px 0;}
                                                                                                                                                                                
        #stopbtn{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;            
        opacity: 0.8;
        cursor:pointer;
        height:14px;
        width:27px;
        margin:5px 0;}
    #slowtobottom{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:0px 0;}
                                                                                                                                                                                
    #hightobottom{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:20px 0;}
                                                                                                                                                                                
</STYLE>

 

添加位置：网页的整体<body>和</body>之间任意位置

 

第三步：

 

下面是添加按钮功能部分，我是用jQuery实现的。

<script type="text/javascript" src="http://t.libdd.com/js/libs/jquery/jquery-1.7-latest.js"></script>
<script type="text/javascript">
                                                         
 jQuery.noConflict(); 
 $(document).ready(
                                                         
$.extend({stopall:function(){$('html,body').stop(true,false);}})
                                                         
$('#stopbtn').click(function(){$.stopall();});
                                                         
$('#hightotop').click(function(){
  $.stopall();
  $('html,body').animate({scrollTop: '0px'}, 800);}); 
                                                         
$('#slowtotop').click(function(){
  $.stopall();
  $('body').animate({scrollTop: '0px'}, 25000);}); 
                                                         
$('#slowtobottom').click(function()
{
  $.stopall();
 $('html,body').animate({scrollTop:$('#copyright').offset().top}, 25000);}); 
                                                         
$("#hightobottom").click(function(){
  $.stopall();
 $('html,body').animate({scrollTop:$('#copyright').offset().top}, 800);}); 
                                                         
});/*ready()*/
})(jQuery);
</script>

 

 

添加位置：网页的整体<head>和</head>之间任意位置，也就是跟第一步一样。

 

分享到：
| HTML 文本区 边框带标题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery动画滑动回到顶部和底部javascript特效代码

    本文将深入探讨“jQuery动画滑动回到顶部和底部”的javascript特效代码，帮助开发者了解并实现这一功能。 首先，让我们理解这个特效的基本概念。在网页浏览时，用户可能需要快速回到页面顶部（例如，点击页面右下角...

    移动端页面上下滑动时禁止显示底部黑色

    页面布局 &lt;body id="wrapper"&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;/body&gt; 引用组件 引用组件支持下面两种方式： clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install...

    Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

    在JavaScript中，H5页面的上下滑动方向判断以及检测是否滑动到顶部或底部是移动设备上常见的交互需求。这些功能可以用于实现如导航栏的自动隐藏和显示、滚动到底部加载更多数据等效果。下面将详细介绍如何使用...

    scrollUp滑动返回顶部

    这个功能使得用户能够轻松快捷地从页面底部返回到顶部，无需手动滚动鼠标或滑动屏幕。下面我们将深入探讨这个功能的实现原理、应用场景以及相关技术。 一、实现原理 1. JavaScript/jQuery实现：最常见的实现方式是...

    滑动返回顶部代码

    滑动返回顶部功能是网页设计中的一个常见交互元素，它允许用户轻松地将页面滚动到顶部，提升用户体验。本文将详细解析"滑动返回顶部代码"的实现原理、设计要点以及弹性动画效果的添加。 首先，我们需要理解这个功能...

    页面滚动到底部自动加载数据

    页面滚动到底部自动加载数据，也被称为无限滚动或滚动加载，是现代网页设计中常见的一种交互方式。这种技术允许用户在浏览网页时无需点击分页按钮，只需将页面滚动到最底部，更多内容就会自动加载出来，提高了用户...

    js判断滚动条是否已到页面最底部或顶部实例

    在本文中，我们将深入分析如何使用JavaScript来判断滚动条是否到达了页面的最顶部或最底部，并探讨了如何实现这一功能的技巧。 首先，我们来理解什么是可视区域（viewport）。可视区域指的是用户在浏览器窗口中可以...

    固定页面头部和底部中间滚动

    对于头部和底部，我们可以将它们的`position`设置为`fixed`，这会使它们始终固定在屏幕的顶部或底部，不论用户滚动页面到何处。 ```css header { position: fixed; top: 0; width: 100%; /* 添加其他样式，如...

    jQuery页面内滑动到锚点导航效果，回到顶部

    本主题将深入探讨如何使用jQuery实现页面内滑动到锚点导航以及添加“回到顶部”的功能。 首先，锚点导航是网页设计中一个常见的功能，允许用户通过点击链接直接跳转到页面内的特定位置。在HTML中，我们可以通过设置...

    页面回到顶部滑动效果

    在网页设计中，"页面回到顶部滑动效果"是一种常见的用户体验优化功能，它允许用户轻松地将浏览的页面瞬间滚动回顶部，而无需手动滚动鼠标或触摸屏幕。这个功能尤其在长篇内容的网页中非常实用，比如博客、论坛或者...

    jQuery鼠标滚动条到页面底部浮动层滑动弹出信息

    本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在HTML...

    随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示

    在网页设计中，提供良好的用户体验至关重要，而"随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示"正是提升用户体验的一种方法。这种设计技术常见于移动端网站，能够优化空间利用，使得用户在浏览内容时不会被固定...

    js实现滑动到页面底部自动加载更多功能

    在进行网页内容的展示时，常常会遇到大量内容需要分批次加载的情况，这时候就需要实现一个“滑动到页面底部自动加载更多内容”的功能。该功能可以有效改善用户阅读体验，避免一次性加载过多数据导致页面响应过慢的...

    手机滑动js效果demo

    在"手机滑动js效果demo"中，上滑加载更多功能的实现可能涉及到监听滚动事件，计算滚动条位置，判断是否接近页面底部，然后通过Ajax或Fetch API请求服务器获取新数据并动态插入到页面中。 其次，下滑刷新（Pull-to-...

    web 滑动回到顶部 jquery

    在网页设计中，"滑动回到顶部"功能是一种常见的用户交互设计，它允许用户通过点击一个按钮或执行特定操作快速返回页面的顶部，提高浏览体验。在这个场景中，我们使用了JavaScript库jQuery来实现这一功能。jQuery是一...

    移动端H5页面左右滑动并加载分页 dropload+swiper

    3. **上下拉加载**：当用户向上滑动到页面顶部时，`dropload` 可以触发刷新操作，获取最新数据；当用户向下滑动到底部时，加载更多商品数据。 实现这一功能的关键步骤包括： 1. **引入库文件**：在HTML文件中引入`...

    用jQuery实现返回顶部滑动跳转效果

    2. **创建返回顶部按钮**：在页面底部添加一个元素，作为返回顶部的触发器。可以是一个简单的按钮或链接： ```html 返回顶部 ``` 这里我们使用`id="gotoTop"`来标识这个元素，方便后续的jQuery选择器使用。 3. **...

    针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。

    1. **监听触摸事件**：我们可以监听`touchmove`事件，当用户尝试向上滑动顶部或向下滑动底部时，阻止事件的默认行为。这样可以防止浏览器暴露灰色背景。 ```javascript document.addEventListener('touchmove', ...

Magicbox
Global site tag (gtag.js) - Google Analytics