添加置顶和到底按钮

蔡源茂 | 创建:2018-03-17 | 最后更新:2018-03-17 | 879次阅读

网上搜了下,发现实现的方法很多,我这里说说我的实现思路:(本博客已采用,github链接:九神小屋

1. 在html页面中,增加一个按钮标签

<div class="jump_toolbar">
    <div class="jump_top btn-move-page" data-type="top">
        <div class="jump_top_in"></div>
		<a href="#">回到顶部</a>
	</div>
    <div class="jump_bottom btn-move-page" data-type="bottom">
        <div class="jump_bottom_in"></div>
		<a href="#" >到达底部</a>
	</div>
</div>

2. 通过css 控制,html标签显示到屏幕右下角排布,并通过transform和boder属性,画出置顶和到底按钮图样。

.jump_top,
.jump_bottom{
	position:fixed;
	right:40px;
	bottom:140px;
	height:50px;
	width: 50px; 
	text-align:center;
	padding-top:20px; 
	background-color: #0ebaa6;
	border-radius: 20%;
	overflow: hidden;
}

.jump_top_in,
.jump_bottom_in{
	display:inline-block;
	height:20px;
	width: 20px;
	border: 3px solid black;
	border-color: #fff transparent transparent #fff;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg); /* Internet Explorer */
	-moz-transform:rotate(45deg); /* Firefox */
	-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
	-o-transform:rotate(45deg); /* Opera */
}
.jump_top a,
.jump_bottom a {
	display:none;
	color:#fff;
	height:40px;
	width: 40px;
	padding-top:5px; 
	text-decoration:none;
	text-align:center;
	font-weight:bold;
}
.jump_top:hover,
.jump_bottom:hover{
	padding-top:0px; 
}
.jump_top:hover .jump_top_in,
.jump_bottom:hover .jump_bottom_in{
	display:none;
}
.jump_top:hover a,
.jump_bottom:hover a{
	display:inline-block;
}

.jump_bottom{
	bottom:80px;
	padding-top:10px; 
}

.jump_bottom_in{
	border-color:  transparent #fff  #fff transparent;
}
.jump_bottom a {
	padding-top:5px; 
}

3. 通过js 实现点击置顶按钮时的窗口滑动效果。

监听div(类btn-move-page)的click事件,实现页面滑动。
我这里将click事件,添加进backbone监控中 不了解backbone?请点击Backbone官网
此处抄袭RubyChina代码,源码链接
coffescrip 代码:


#click事件,添加进backbone监控中 
  events:
    "click .btn-move-page": "scrollPage"


  scrollPage: (e) ->
    target = $(e.currentTarget)
    moveType = target.data('type')
    opts =
      scrollTop: 0
    if moveType == 'bottom'
      opts.scrollTop = $('body').height()
    $("body, html").animate(opts, 300)
    return false

4. 页面初始化时,设置 置顶和到底 按钮的显示状态

coffescrip 代码:

    window_height=$(window).height() #获取当前窗口高度
    body_height=$('body').height() #获取body标签高度
    height = body_height - window_height
    if $(window).scrollTop()==0
      $('.jump_top').addClass("hide")
    if $(window).scrollTop()==height
      $('.jump_bottom').addClass("hide")
    $(window).scroll ->
      scrollTop_value=$(window).scrollTop()
      if scrollTop_value>0 
        $('.jump_top').removeClass("hide")
      else
        $('.jump_top').addClass("hide")

      if scrollTop_value<height
        $('.jump_bottom').removeClass("hide")
      else
        $('.jump_bottom').addClass("hide")


共收到 0 条回复


评论:

忘记密码?
其他账号登录: QQ登录

回到顶部
到达底部