Подтвердить что ты не робот

Плавный прокрутка вверх

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

Вот где я получил плавную прокрутку. Я пытался настроить "плавный переход к элементу без jquery-плагина", но понятия не имею, как его организовать, очевидно, после бесчисленных попыток. Я также использовал window.scrollTo(0, 0); но он прокручивается мгновенно. Спасибо!

Кроме того: http://jsfiddle.net/WFd3V/ - код, вероятно, будет тегом class="smoothScroll" так как мой другой элемент использует его, но я не знаю, как смешать его с href="javascript:window.scrollTo(0,0);" или что-нибудь еще, что привело бы страницу наверх без привязки.

4b9b3361

ОТВЕТЫ

Ответ 1

Вот мое предложение реализовано с ES6

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
scrollToTop();

Совет: для более медленного движения прокрутки увеличьте жестко запрограммированное число 8. Чем больше число - тем плавнее/медленнее прокрутка.

Ответ 2

Я думаю, что самое простое решение:

window.scrollTo({top: 0, behavior: 'smooth'});

Если вы хотите мгновенную прокрутку, просто используйте:

window.scrollTo({top: 0});

Может использоваться как функция:

// Scroll To Top

function scrollToTop() {

window.scrollTo({top: 0, behavior: 'smooth'});

}

Или как обработчик onclick:

<button onclick='window.scrollTo({top: 0, behavior: "smooth"});'>Scroll to Top</button>

Ответ 3

Только чистый Javascript

var t1 = 0;
window.onscroll = scroll1;

function scroll1() {
  var toTop = document.getElementById('toTop');
  window.scrollY > 0 ? toTop.style.display = 'Block' : toTop.style.display = 'none';
}

function abcd() {
  var y1 = window.scrollY;
  y1 = y1 - 1000;
  window.scrollTo(0, y1);
  if (y1 > 0) {
    t1 = setTimeout("abcd()", 100);
  } else {
    clearTimeout(t1);
  }
}
#toTop {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 48px;
}

#toTop {
  transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  opacity: 0.5;
  display: none;
  cursor: pointer;
}

#toTop:hover {
  opacity: 1;
}
<p>your text here</p>
<img id="toTop" src="http://via.placeholder.com/50x50" onclick="abcd()" title="Go To Top">

Ответ 4

Вы должны начать использовать jQuery или некоторые другие js lib. Это проще, чем js, и вы можете использовать его как сокращенное для большинства js вместо фактически длинного, вытянутого js.

Проще говоря, <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> (или какой-нибудь новый goddcd https://developers.google.com/speed/libraries/devguide#jquery) в <head>.

Затем, внутри вашего кода event (гораздо проще, если вы используете jQuery: $.click() для кнопок, $.change() для флажков, выберите, радио...), поместите код со своей второй ссылки, более похожий на

$('#theIDofTheButtonThatTriggersThisAnimation').click(function(){
    $('#theIDofTheElementYouWantToSmoothlyScroll').animate({
        scrollTop: 0
    }, 2000);
});

Однако, если вы пытаетесь сделать анимацию, я рекомендую вам изучить некоторые базовые свойства css, такие как position:absolute и position:relative, чтобы не сходить с ума.

Я все еще не совсем уверен, что происходит в вашем коде, потому что он очень нестандартен относительно того, как теперь делаются css и jQuery. Я бы разбил его на что-то простое, чтобы изучить общую концепцию.

В вашем примере вы должны построить свой пример анимации, как я узнал: fooobar.com/questions/942423/...

Я думаю, вы пытаетесь переместить текст вверх и вниз на основе $.click(). В скрипке в моем ответе он скользит влево и вправо. Вы можете легко переформатировать вверх и вниз, используя свойство css top вместо left.

Как только вы выясните, как перемещать весь div вверх и вниз, вы можете сделать контейнер relative для хранения всего содержимого absolute div и обработать весь контент div с помощью цикла by устанавливая их top s. Здесь быстрый праймер на absolute в relative: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Во всех моих анимациях есть контейнеры relative и absolute. Это, как я сделал настраиваемый плагин gridview, который может мгновенно зашифровать всю базу данных.

Кроме того, нет никакого чрезмерного использования div, когда дело касается анимации. Попытка сделать 1 div сделать все это кошмар.

Попробуйте посмотреть, можно ли переформатировать мою скрипку в вертикальный слайд. Как только вы это сделаете, исследование absolute в relative немного. Если у вас есть еще какие-то проблемы, просто задайте другой вопрос.

Измените свое мышление на эти философии, и вы начнете пролетать через этот тип кодирования.

Ответ 5

Хмм, для меня это не работает,

попробуйте это

$(document).ready(function(){
	$("#top").hide();
	$(function toTop() {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#top').fadeIn();
			} else {
				$('#top').fadeOut();
			}
		});

		$('#top').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});			
			
			
	
	});
#top {
  float:right;
  width:39px;
  margin-top:-35px;	
}
#top {
    transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    opacity: 0.5;
    display:none;
    cursor: pointer;
}
#top:hover {
    opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="top" onclick="toTop()"><img src="to_top.png" alt="no pic "/> klick to top</div>

Ответ 6

Вы можете просто использовать

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("gotoTop").style.display = "block";
    } else {
        document.getElementById("gotoTop").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#gotoTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#gotoTop:hover {
  background-color: #555;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="gotoTop" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Ответ 7

Прошло некоторое время с тех пор, как об этом спросили.

Теперь можно не только указывать число в функции window.scroll, но и передавать объект с тремя свойствами: top, left и поведение. Так что, если мы хотим плавно прокрутить нативный JavaScript, мы можем сделать что-то вроде этого:

let button = document.querySelector('button-id');
let options = {top: 0, left: 0, behavior: 'smooth'}; // left and top are coordinates
button.addEventListener('click', () => { window.scroll(options) });

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Ответ 8

Я только что настроил BootPc Deutschland answer

Вы можете просто использовать

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('body,html').animate({
            scrollTop: 0
        }, 800);
    $('#btn-go-to-top').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
}); 
</script>

это поможет вам плавно прокрутить до верхней части страницы.

и для стиля

#btn-go-to-top {
opacity: .5;
width:4%;
height:8%;
display: none;
position: fixed;
bottom: 5%;
right: 3%;
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 10px;
 border-radius: 50%;
}

#btn-go-to-top:hover {
opacity: 1;
}
.top {
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

этот стиль заставляет кнопку прибывать в нижнем правом углу страницы.

и на вашей странице вы можете добавить кнопку, чтобы перейти наверх, как это

<div id="btn-go-to-top" class="text-center top">
<img src="uploads/Arrow.png" style="margin: 7px;" width="50%" height="50%">
</div>

надеюсь, что это поможет вам. Если у вас есть какие-то сомнения, вы всегда можете спросить меня

Ответ 9

также используется ниже:

  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;

Ответ 10

Элегантное простое решение с использованием jQuery.

<script>
    function call() {
        var body = $("html, body");
        body.stop().animate({scrollTop:0}, 500, 'swing', function() {
        });
    }
</script>

и в вашем HTML: <div onclick="call()"><img src="../img/[email protected]"></div>