JavaScript At Bottom/Top of Web Page

html, body {  margin: 0;}.wrapper {  display: flex;  flex-direction: column-reverse;  max-height: 100vh;  overflow: auto;}

<div class="wrapper">  Top<br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Long content <br><br><br>  Bottom</div>

JavaScript top or bottom - location sensitive?

For example, if you want to manipulate DOM items, and those are not yet existing, it won't work. If the JavaScript file is included in the head, the body is not existing yet, but if you include it at the end of the body, those items are valid.

If you don't want to rely on this behaviour, you may define a callback, which is run, when the document is ready, i.e. when the whole of the DOM is loaded already.

This is what e.g. jQuery achieves with $(document).ready(function() {}), or more shortly $(function () {});. In vanilla JavaScript (using modern browsers, so IE9+) this can be achieved using

document.addEventListener("DOMContentLoaded", function() {
    // code...
});

Can I put a script at the bottom of a web page, but call it from the top?

You need to load the script before you can call it. Why don't you change it to something like this:

<input name="xyz" id="myInput">
      ...
     <script>
        function myFunction
        {
          ...
        }

        window.onload = function() {
            var myInput = document.getElementById('myInput');
            myInput.onchange = myFunction;
        }
      </script>

This approach allows you to separate your markup and scripting and have all of your js in one place.

Issue getting web page to start from the Bottom of the screen once loaded

When your code is using document.body.scrollHeight it is only set to 30px.

You can use the top value of your element though:

var p = $(".part-one").position();
window.scrollTo(0, p.top);

As for the onscroll event, I would suggest putting that in a function and then calling the function at the end of your document.ready.

   $(document).ready(function(){
         var p = $(".part-one").position();
         window.scrollTo(0, p.top);
         started = true; // set our started variable to true so we know the page has scrolled
         setScroll();
    });

and then create the setScroll function:

function setScroll() {
  window.onscroll = function() {
        checkScroll();
  };  
}

how to go bottom of a website like back to top using javascript?

To smoothly scroll to the body's end you can use this:

DEMO

$(function (){ 
    var bodyHeight = $('body').height();

    $('#back-bottom a').on('click', function(){
        $('html, body').animate({scrollTop: bodyHeight}, 300);
    });
});

Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?

There are two possibilities for truly unobtrusive scripts:

• including an external script file via a script tag in the head section
• including an external script file via a script tag at the bottom of the body (before </body></html>)

The second one can be faster as the original Yahoo research showed some browsers try to load script files when they hit the script tag and therefore don't load the rest of the page until they have finished. However, if your script has a 'ready' portion which must execute as soon as the DOM is ready you may need to have it in the head. Another issue is layout - if your script is going to change the page layout you want it loaded as early as possible so your page does not spend a long time redrawing itself in front of your users.

If the external script site is on another domain (like external widgets) it may be worth putting it at the bottom to avoid it delaying loading of the page.

And for any performance issues do your own benchmarks - what may be true at one time when a study is done might change with your own local setup or changes in browsers.

HTML-CSS To top and to bottom of page buttons

Check the following implementation. Not sure if it is what you are looking for, but surely is a good starting point.

const body = document.getElementsByTagName('BODY')[0];
const [buttonTop, buttonBottom] = document.querySelectorAll('button[type=button]');

const scrollingElement = document.scrollingElement || body;

const goTop = () => {
    scrollingElement.scrollTop = 0;
};

const goBottom = () => {
    scrollingElement.scrollTop = scrollingElement.scrollHeight;
};

const onScrollHandler = () => {
    if (scrollingElement.scrollTop > 20) {
        buttonTop.style.display = 'block';
    } else {
        buttonTop.style.display = 'none';
    }

    if (scrollingElement.scrollTop > scrollingElement.scrollHeight - scrollingElement.clientHeight - 20) {
        buttonBottom.style.display = 'none';
    } else {
        buttonBottom.style.display = 'block';
    }
}

buttonTop.addEventListener('click', goTop);
buttonBottom.addEventListener('click', goBottom);
window.addEventListener('scroll', onScrollHandler);

onScrollHandler();

.root {
    height: 5000px;
}

.button-top,
.button-bottom {
    position: fixed;
    left: 4px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #4e2f8e;
    color: #ffffff;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

.button-top {
    display: none;
    bottom: 120px;
}

.button-bottom {
    bottom: 6px;
}

.button-top:hover,
.button-bottom:hover {
    background-color: #cabce5;
    color: #17043a;
}

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>NO TITLE</title>
</head>

<body>
    <div class="root">
        <h1>SCROLL ME</h1>
        <button type="button" class="button-top" title="Go to top"><i class="far fa-arrow-alt-circle-up">TOP</i></button>
        <button type="button" class="button-bottom" title="Go to bottom"><i class="far fa-arrow-alt-circle-down">BOTTOM</i></button>
    </div>
</body>

<script src="js/secret.js"></script>

<script defer src="js/secret.js"></script>