×

基于jQuery点击事件之置顶和居底功能

作者:admin2017.06.19来源:Web前端之家浏览:5260评论:1
关键词:JQuery置顶居底
微信公众号

微信公众号

123.png

点击某个按钮,页面平滑到顶部和居底,这个功能应用太广了,实现它我们是基于jQuery来实现,不熟悉的童鞋可以一起来学下咯。

实现这个功能的代码很简单,其核心主要在jQuery部分,这里就不啰嗦了,直接贴上代码。

页面居底:

我们创建一个html页面,点击按钮页面平滑到底部:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于jQuery点击事件之居底 - Web前端之家</title>
    <style type="text/css">
        .demoHeight{height:1400px;background:#f0f0f0}
        .scrollToBottom{position:fixed;right:10px;top:50%;margin-top:-30px;width:80px;height:60px;line-height:60px;text-align:center;background:#000;color:#fff;font-size:14px}
    </style>
</head>
<body>
<a href="javascript://" class="scrollToBottom">点击我</a>
<div class="demoHeight">页面高度</div>
<script type="text/javascript" src="/demo/js/jq.js"></script>
<script type="text/javascript">
    $(function(){
        $('.scrollToBottom').click(function(){
        $('html,body,.content').animate({scrollTop:$(document).height()},300);
        return false;
        });
    }) 
</script>
</body>
</html>

它是如何工作的

当连接的.scrollToBottom类被点击的时候执行{}里面的动。

$(document).ready(function(){ 
    $('.scrollToBottom').click(function(){
        $('html,body,.content').animate({scrollTop:$(document).height()},300);
            return false;
    }
});

当一个链接被点击的代码将在函数内部运行,scrollTop的功能是使用平滑滚动效果。上面的代码将滚动到页面底部,使用窗口的高度,以确定底部高度。数字300是平滑的速度,看项目需求而定。

页面置顶

我们创建一个html页面,点击按钮页面平滑到底部:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基于jQuery点击事件之置顶 - Web前端之家</title>
    <style type="text/css">
        .demoHeight{height:2000px;background:#f0f0f0}
                .scrollToTop{position:fixed;right:10px;top:50%;margin-top:-30px;width:80px;height:60px;line-height:60px;text-align:center;background:#000;color:#fff;font-size:14px}
    </style>
</head>
<body>
<div class="demoHeight">页面高度</div>
<a href="javascript://" class="scrollToTop">点击我</a>
<script type="text/javascript" src="/demo/js/jq.js"></script>
<script type="text/javascript">
    $(function(){
        $('.scrollToTop').click(function(){
        $('html,body,.content').animate({scrollTop:0},300);
        return false;
        });
    }) 
</script>
</body>
</html>

它是如何工作的

当在页面加载类.scrollToTop的链接被点击时的jQuery将执行:

$('html, body').animate({scrollTop:0},300);
return false;

.animate()方法使我们能够创建任何数字的CSS属性的动画效果,scrollTop的功能设置为0,这代表了滚动条在最上方的位置,“数字300是平滑的速度。

刚才忘记说明一点:

return false;对于这句代码,我们是防止的默认动作被触发的事件,在我们的例子中,它可以防止用户链接,但方法不只是这一种,我们也可以使用event.preventDefault();

总结

基于jQuery点击事件之置顶和居底的功能是不是很简单呢,希望大家能掌握,更多学习,请持续关注Web前端之家。

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jQueryTopBottom.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • jacren  发布于 2017-06-19 17:14:31   回复该评论
  • 点击按钮置顶用过,居底还不知道,学习了,感谢分享。

最新留言

  • 菜鸟日记

    有点东西。来学习一下~...

  • 码云笔记

    你好,前端博客-www.mybj123.com申请友链,有兴趣请联系QQ3261229068...

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero