properly scroll element to the top of the page using javascript

Question

What I am trying to do is render my page with a certain element scrolled to the top if the url contains a certain word. I've been able to successfully extract the url with the following:

  if(window.location.href.indexOf("Awesome") > -1) {
    alert('hey, your url has Awesome in it!')
  };

However I am at a crossroads in terms of getting the page to render with a specific element scrolled to the top... Any suggestions?

UPDATE - here is my current logic:

window.addEventListener('load', function(){

  (function(){

    function goto(id) {
      var elem = document.getElementById(id);
      window.scrollTo(0, elem.getBoundingClientRect().top);
    }

    if(window.location.href.indexOf("Awesome") > -1) {
      goto('full--stop');
    };
  })();

PaulBGD · Answer 1 · 2017-02-13T05:52:06.523

0

How about getting the position of the element and scrolling there?

function goto(id) {
  var elem = document.getElementById(id);
  window.scrollTo(0, elem.getBoundingClientRect().top);
}
goto('three');

<button onclick="goto('two')">Go to two</button>
<button onclick="goto('three')">Go to three</button>
<div id="one">One</div>
<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="two">Two</div>
<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="three">Three</div>
<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/>

More Info: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Also if you don't want to do it in JavaScript, then browsers have a built-in feature to scroll to the element with the id that matches the # in the browser URL. So a example.com/page#myid would scroll to the element with the id of myid.

edited Feb 13 '17 at 05:52

answered Feb 13 '17 at 05:07

PaulBGD

2,018
5
22
30

the scrollTo solution doesn't seem to work for whatever reason – John Jackson Feb 13 '17 at 05:45
@JohnJackson I added a runnable example that works using the same code. – PaulBGD Feb 13 '17 at 05:47
yes, while this works on a click event, it isn't firing in my 'window.location.href.indexOf("Awesome") > -1' statement, which is called within an IIFE – John Jackson Feb 13 '17 at 05:51
I modified the example to go to #three when it loads. Make sure your JavaScript is ran after the DOM is loaded. – PaulBGD Feb 13 '17 at 05:52
check updated question, i have my code running on a window load event listener, even when i run it in a '$(document).ready(function()' func, no cigar – John Jackson Feb 13 '17 at 05:56

score 0 · Accepted Answer · answered Feb 13 '17 at 05:13

0

You can do this in two ways :

1st method:

$('html, body').animate({
    scrollTop: $("#your element ID").offset().top
}, 2000);

2nd method:

<div id="myDiv"></div>

location.href = "#";
location.href = "#myDiv";

answered Feb 13 '17 at 05:13

Happy Coding

2,517
1
13
24

2nd method was exacting what i sought after, gracias :] – John Jackson Feb 13 '17 at 05:21
@JohnJackson glad to know it helps – Happy Coding Feb 13 '17 at 05:22
would there be anyway to exempt that #myDiv in the actual url? or does that defeat the purpose? – John Jackson Feb 13 '17 at 05:25
well you can read the SO answer http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh – Happy Coding Feb 13 '17 at 05:29
i don't believe those answers correlate to my inquiry. I still want the same functionality of scrolling to that element on load, but i want to remove the '#' from the url – John Jackson Feb 13 '17 at 05:35
if you don't want # in the url, then follow the first answer. – Happy Coding Feb 13 '17 at 05:37
it isn't functioning for me – John Jackson Feb 13 '17 at 05:45

properly scroll element to the top of the page using javascript

2 Answers2