当前位置:首页 > jQuery技术文章 > jQuery创建平滑的页面滚动(顶部或底部)

如何使用jQuery实现平滑的页面滚动到顶部或底部

  • 发布时间:
  • 作者:码农之家原创
  • 点击:191

这篇文章主要知识点是关于jQuery、页面滚动、基于jquery实现页面滚动时顶部导航显示隐藏 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情

jQuery创建平滑的页面滚动(顶部或底部)

在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery。让您可以滚动到你的网页的顶部或底部

它是如何工作的
首先,加载jquery库在</ head>标签结束前:
 

<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部:

链接:
<a href="#" class="scrollToBottom">Scroll to bottom</a>jQuery
 

<script type="text/javascript">
$(document).ready(function(){
// Scroll page to the bottom
$('a.scrollToBottom').click(function(){
$('html, body, .content').animate({scrollTop: $(document).height()}, 300);
return false;
});
})
</script>

它是如何工作的
第一行代码在页面加载之前执行
$(document).ready(function(){当连接的.scrollToBottom类被点击的时候执行{}里面的动作

$(document).ready(function(){
$('a.scrollToBottom').click(function(){
});
})在这个函数中,执行这个代码
$('html, body').animate({scrollTop: $(document).height()}, 'slow');
return false;当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。使用“slow”,“medium”和“fast”的速度控制,我使用了'slow。
jQuery的滚动到顶部
首先,插入一个链接到你的网页页脚部分,当被点击的jQuery代码将执行。动画的功能。是非常重要的,因为它是在jQuery中引用类的链接。
链接:
<a href="#" class="scrollToTop">Scroll to bottom</a>jQuery
 

<script type="text/javascript">
$(document).ready(function(){
$('a.scrollToTop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})
</script>

它是如何工作的
当在页面加载类。scrollToTop的链接被点击时的jQuery将执行此
$('html, body').animate({scrollTop:0}, 'slow');
return false;.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“slow”是指动画将运行的速度,在你会注意到这一行:
<code>return false;</code>这可以防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接。
也可以这样
 

event.preventDefault();

基于jquery实现页面滚动时顶部导航显示隐藏

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

基于jquery实现页面滚动时顶部导航显示隐藏

具体代码如下:

引入核心文件

<script src="js/jquery/1.11.1/jquery.min.js"></script>

构建html,margint这个div中为了出现滚动条而建,并无实际作用。

<div class="top-title">这是顶部导航条</div>
<div class="margint"><p>滚动看效果</p><p>滚动看效果</p></div>

写入CSS

.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}
.hiddened{top: -90px;}
.showed{top:0;z-index: 9999;}

top-title中定义了transition: top .5s;是指.5S时间内动画展示top方向数值的改为。如添加hidden类后,top-title会在0.5s内从top的0动画缓冲到-90PX。
写入JS

$(function(){  
  var winHeight = $(document).scrollTop();
 
  $(window).scroll(function() {
    var scrollY = $(document).scrollTop();// 获取垂直滚动的距离,即滚动了多少
 
    if (scrollY > 550){ //如果滚动距离大于550px则隐藏,否则删除隐藏类
      $('.top-title').addClass('hiddened');
    } 
    else {
      $('.top-title').removeClass('hiddened');
    }
 
    if (scrollY > winHeight){ //如果没滚动到顶部,删除显示类,否则添加显示类
      $('.top-title').removeClass('showed');
    } 
    else {
      $('.top-title').addClass('showed');
    }        
 
   });
});

以上就是基于jquery实现页面滚动时顶部导航显示隐藏的总体构思,希望大家沿着这个思路完成导航显示隐藏的效果,谢谢大家阅读。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到JQuery循环滚动文字图片实、 jquery幻灯片效果实例代码、 怎样处理jQuery EasyUI 已打开、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jquery实现鼠标拖动效果的代码

下一篇:jQuery中read和JavaScript中的onload函数的区别总结

展开 +

收起 -

jQuery页面滚动 相关内容
jQuery循环滚动新闻列表实例代码

jquery实现点击公告的上一条下一条来查看滚动条,示例代码如下,希望对大家有所帮助

查看详情
时间: 19-12-19
jquery点击元素后滚动条滚动至该元素位置的功能实现

下面小编就为大家带来一篇jquery 点击元素后,滚动条滚动至该元素位置的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

查看详情
时间: 19-07-30
JQuery循环滚动文字图片实例代码

这篇文章主要为大家提供了多种JQuery循环滚动文字图片效果代码,横向纵向循环文字或图片,感兴趣的小伙伴们可以参考一下

查看详情
时间: 19-10-25
jQuery左右滚动支持图片放大缩略图轮播实例代码

这篇文章主要介绍了jQuery左右滚动支持图片放大缩略图图片轮播效果,推荐给大家,有需要的小伙伴可以参考下。

查看详情
时间: 19-12-07
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
jQuery页面滚动 学习笔记
网友NO.857646

jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到。 var loading = false;$(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)=$(document).height()){ if(loading == false){ loading = true; $('#loadingbar').css("display","block"); $.get("load.php?start="+$('#loaded_max').val(), function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading = false; }); } }});$(document).ready(function() { $('#loaded_max').val(50);}); 希望本文所述对大家的jQuery程序设计有所帮助。 ……

网友NO.419668

jQuery实现页面滚动时智能浮动定位

话不多说,请看代码: !DOCTYPE htmlhtmlhead meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titlejQuery实现页面滚动时层智能浮动定位_前端开发/title style type="text/css" * { margin: 0; padding: 0; } body { font: 12px/1.8 Arial; color: #666; } h1.tit-h1 { font-size: 38px; text-align: center; margin: 30px 0 15px; color: #f60; } .wrap { border: 1px dashed #ccc; background: #f8f8f8; padding: 20px; } .demo { height: 1500px; } .float { width: 80px; padding: 10px; border: 1px solid #ffecb0; background-color: #fffee0; -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2); box-shadow: 1px 1px 2px rgba(0,0,0,.2); position: absolute; right: 10%; top: 131px; } /style script type="text/javascript" src="../..content/js/jquery-1.4.4.min.js"/script/headbody h1 class="tit-h1"jQuery实现页面滚动时层智能浮动定位_前端开发/h1 div class="wrap" div class="demo"/div div class="float" id="float"我在这里等你……

网友NO.392712

基于jquery实现页面滚动到底自动加载数据的功能

现在,我们经常使用的微博、微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由于它每次只加载一部分数据,当我们有大量的数据,但不能显示所有,这时我们可以考虑使用异步方式加载数据。 数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载;在接下来的博文中,我们将介绍如何实现自动加载更多的功能。 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的消息数据,现在,我们需要通过Web Service形式开放API接口让客户端调用,当然我们也可以使用一般处理程序(ASHX文件)让客户端调用(具体请参考这里)。 数据表 首先,我们在数据库中创建数据表T_Paginate,它包含……

网友NO.387278

jQuery阻止移动端遮罩层后页面滚动

css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeClass('ovfHiden'); //使网页恢复可滚 $(".searchbox").hide(); }) 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持码农之家! ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757