时间戳

首页 > 解决方案 > 在页面加载时显示底部而无需任何滚动

javascript - 在页面加载时显示底部而无需任何滚动

问题描述

我想在没有任何滚动的情况下加载页面底部。例如 - messanger 应用程序始终显示页面底部。页面加载时没有从上到下的滚动。我想这样做

标签： javascriptjquery

解决方案

这里设置了一个固定按钮，在页面右下角可用，滚动时不变

a{
	text-decoration: none;
}

.bar_wpp {
  position: fixed;
  bottom: 5px;
  right: 70px;
  z-index: 120;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
}

.bar_wpp a {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.bar_wpp .icon_wpp i {
  color: #ffffff;
  font-size: 20px;
}

.bar_wpp .icon_wpp {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0c7619;
  text-align: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  float: left;
  z-index: 2;
}

.bar_wpp .txt_wpp {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #0e3f14;
    color: #ffffff;
    padding: 0px 5px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    padding-right: 11px;
    padding-left: 45px!important;
    margin-left: -35px;
    z-index: 1;
    border-radius: 50px;
}


.bar_wpp a:hover{text-decoration: none !important;}
.bar_wpp a:hover .icon_wpp{background-color: #0e3f14;}
.bar_wpp a:hover .txt_wpp{background-color: #0c7619;}


@media(max-width: 475px){
  .bar_wpp{right: auto;left: 5px;bottom: 15px;}
  .bar_wpp .icon_wpp i{font-size: 25px;}
  .bar_wpp .txt_wpp{display: none;}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
page content	1<br><br><br>
      page content	2<br><br><br>
      page content	3<br><br><br>
      page content	4<br><br><br>
      page content	5<br><br><br>
      page content	7<br><br><br>		
      page content	8<br><br><br>
      page content	9<br><br><br>
      page content	10<br><br><br>
      page content	11<br><br><br>
      page content	12<br><br><br>
			page content	 13<br><br><br>

<div class="bar_wpp">
		<a href="#" title="Message on WhatsApp" target="_blank">
				<div class="icon_wpp"> <i class="fa fa-home" aria-hidden="true"></i></div>
				<div class="txt_wpp">
						My Button
				</div>
		</a>
</div>

推荐阅读