Блог

Главная - Вопросы по программированию - показывать дно при загрузке страницы без прокрутки

показывать дно при загрузке страницы без прокрутки

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу загрузить нижнюю часть страницы при загрузке без какой-либо прокрутки. например, приложение messanger всегда показывает нижнюю часть страницы. при загрузке страницы прокрутка сверху вниз отсутствует. Я хочу это сделать

Комментарии:

1. Закрепите нижний колонтитул в нижней части страницы: w3schools.com/howto/howto_css_fixed_footer.asp

2. вы имеете в виду, что на некоторых веб-сайтах есть опция чата в левом нижнем углу страницы, а не возможность прокрутки.? пример — спросите Ага

3. Не уверен, что спрашивается, но возможным другим ответом может быть функция прокрутки Javascripts: developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

4. Пожалуйста, обновите свой вопрос, чтобы показать, что вы пробовали, включая любой HTML и скрипт, чтобы продемонстрировать вашу проблему.

Ответ №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>

Ответ №2:

Вам нужно использовать фиксированный div для достижения того, чего вы хотите.

Допустим, вы создали a 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;
}

Ответ №3:

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