Geek Answers Handbook

Smooth scroll up

I have been looking for this for several hours, and I have no solution. I want a smooth scroll to the top of the page. I already have a smooth scroll to separate the anchors on the page with the .js file attached to my site, but I can’t use the anchor for the top, because I use a template from a free hosting site with built-in page building tools that do not allow me edit over body area.

This is where I got a smooth scroll. I tried to set up a "smooth transition to an element without a jquery plugin", but I have no idea how to organize it, obviously, after countless attempts. I also used window.scrollTo(0, 0); but it scrolls instantly. Thanks!

Also: http://jsfiddle.net/WFd3V/ - the code will probably be a class="smoothScroll" tag since my other element uses it, but I don’t know how to mix it with href="javascript:window.scrollTo(0,0);" or anything else that brings the page to the top without binding.

+20
source share
10 answers

Here is my suggestion implemented with ES6

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

Tip: To slow down the scroll motion, increase the hard-coded number 8 . The larger the number, the smoother / slower the scroll.

+40
source

I think the simplest solution is:

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

If you want instant scrolling just use:

 window.scrollTo({top: 0});

It can be used as a function:

 // Scroll To Top function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); }

Or as an onclick handler:

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

Only pure 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">
+7
source

You should start using jQuery or some other js lib. This is simpler than js, and you can use it as a shorthand for most js instead of the actually long, elongated js.

Simply put, <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> (or some new goddcd https: // developers. google.com/speed/libraries/devguide#jquery ) in <head> .

Then, inside your event code (much easier if you use jQuery: $.click() for buttons, $.change() for checkboxes, select, radio ...), put the code from your second link, more like

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

However, if you are trying to make an animation, I recommend that you study some basic css properties, such as position:absolute and position:relative , so as not to go crazy.

I'm still not quite sure what is going on in your code, because it is very non-standard as to how css and jQuery are done now. I would break it into something simple in order to study the general concept.

In your example, you should build your animation example, as I found out: fooobar.com/questions/942423 / ...

I think you are trying to move text up and down based on $.click() . In the violin in my answer, it slides left and right. You can easily reformat up and down using the css top property instead of left .

Once you figure out how to move the entire div up and down, you can make a relative container to hold all the contents of the absolute div and process all the content of the div with a by loop by setting them top s. Here's a quick primer on absolute in relative : http://css-tricks.com/absolute-positioning-inside-relative-positioning/

All my animations have relative and absolute containers. This is how I made a custom gridview plugin that can instantly encrypt the entire database.

In addition, there is no overuse of the div when it comes to animation. Trying to make 1 div make it all a nightmare.

Try to see if it is possible to reformat my violin into a vertical slide. Once you do this, research absolute in relative bit. If you still have any problems, just ask another question.

Change your thinking to these philosophies, and you will begin to fly through this type of coding.

+6
source

Hmm, that doesn't work for me,

try it

 $(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>
+5
source

You can just use

 // 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>
+3
source

Some time has passed since they asked about it.

Now you can not only specify a number in the window.scroll function, but also pass an object with three properties: top, left and behavior. So if we want to smoothly scroll through native JavaScript, we can do something like this:

 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

+3
source

I just set up BootPc Deutschland answer

You can just use

 <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>

this will help you smoothly scroll to the top of the page.

and for style

 #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; }

this style makes the button arrive in the lower right corner of the page.

and on your page you can add a button to go up like this

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

Hope this helps you. If you have any doubts, you can always ask me

+2
source

also used below:

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

An elegant, simple solution using jQuery.

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

and in your HTML: <div onclick="call()"><img src="../img/ arrow-up@2x.png "></div>

0
source

More articles:


All Articles