What Is The Best Way To Scroll To Something Smoothly With Javascript?

So, i'm new to coding, like 2 months or something. I'm trying to make a menu in a one-page-website that when you click a link in the menu, you go to that section.. but i don't thin

Solution 1:

You could do that using CSS, or Js for cross-browser, as shown at the link bellow.

it looks like this:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behaviorif (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hashvar hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)window.location.hash = hash;
      });
    } // End if
  });
});
</script>

https://www.w3schools.com/howto/howto_css_smooth_scroll.asphttps://css-tricks.com/examples/SmoothPageScroll/

Solution 2:

Here's a simplified SmoothScrolling example taken from w3schools that uses jQuery. Note that a common problem with smooth-scroll (or with jump-to-ID) is that the stop location is a little above or below what is truly desired. The fix is to use an offset, demonstrated in this example. (View the example "Full Page" by clicking that link at top right of the snippet window)

$("nav ul li a").on('click', function(event) {
    if (this.hash !== "") {
        var myOffset = $('#myOff').val(); //get value from input (offset value)if (myOffset==='') $('input').addClass('alert');

        event.preventDefault(); // Prevent default anchor click behaviorvar hash = this.hash; // Store hash// jQuery animate() method for smooth page scroll// 900 is the number of ms to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top - myOffset
        }, 900);
    } // End if
});

//$('div:contains(Section)').css('font-weight','bold');

html,body{margin:0;padding:0;font-family:Calibri;}
body{height:2500px;}
ul,li{margin:0;padding:0;}
*{box-sizing:border-box;}
section{
  display: grid;
  place-items: center;
  width: 100%;
  height: 500px;
}
nav{position:fixed;width:80vw;background:white;border:1px solid red;}
::placeholder{color:#ccc;}
navulli{
  display: inline-block;
  padding:0;
  border: 1px solid rgba(200,200,200,0.3);
}
navulli:hover{background: #ddd;}
a{text-decoration:none;padding:10px25px;display:inline-block;}

#one{background:palegreen; padding:50px;}
#two{background:palegoldenrod;}
#twa{background:lightblue;}
#fer{height:1500px;}
.alert{border:1px solid red;background:#ffc0cb99;}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav><ul><li>NAV / HEADER:</li><li><ahref="#one">One</a></li><li><ahref="#two">Two</a></li><li><ahref="#twa">Three</a></li><li><inputid="myOff"type="text"placeholder="Offset (e.g. 75):" /></li></ul></nav><sectionid="one"><div><divstyle="text-align:center">Section One</div><div>Directions:<br>(a) View as Full Page (link at top right)<br>(b) Enter offset number (for how many pixels the smooth-scroll will stop short)<br>(c) Click nav "Two" or "Three" and observe<br>(4) Repeat using a different offset value<br>Note: The fixed header is deliberately not full width in order to show the top of the next section scrolling UNDER the header (undesireable) The offset prevents that, and is what you are asking about.</div></div></section><sectionid="two">
  Section Two
</section><sectionid="twa">
  Section Three
</section><sectionid="fer">
  Section Four
</section>

Example code ripped off from:

w3schools Company Theme example

Solution 3:

you can use tags :

on your HTML give a tag to the element that you want to scroll to :

<button (click) = 'scrollto(target)'> CLick ME

On your JS : scrollto (el : HTMLElement) { el.scrollIntoView(true); }