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

Question

我想在加载时加载页面底部，而无需进行任何滚动。 例如-messanger应用始终显示在页面底部。页面加载没有从上到下的滚动。我想这样做

Answer 1

在此设置一个固定按钮，该按钮在页面右下角可用，滚动时不会更改

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>

Answer 2

您需要使用固定的div来实现所需的功能。

说，您已经创建了一个div，其类名称设置为footer，如下所示；

<div class="footer">
  <p>Anything inside the div with class footer will be fixed at bottom of the screen</p>
</div>

如果要将此div固定在屏幕底部，则应在样式（css）中按如下所示设置固定位置；

.footer {
  position: fixed
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: green;
}

Answer 3

window.scrollTo(0,document.body.scrollHeight);