linking a js file to html in dreamweaver

Here is a working snippet of your code, comments have been added where necessary. Run it to see the code in action.

//Get the button
            var mybutton = document.getElementById("TopBtn");
            
            //Declare body and html as vars
            //Some browsers apply scroll to body, and others apply scroll to html so we are getting both
            var body = document.body
            var html = document.documentElement;

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

            function scrollFunction() {
                if ( body.scrollTop || html.scrollTop > 20) {
                mybutton.style.display = "block";
                } else {
                mybutton.style.display = "none";
}
            }

          // When the user clicks on the button, scroll to the top
            function topFunction() {
                body.scrollTop = 0;
                html.scrollTop = 0;
            }
#TopBtn {
display: none; 
position: fixed;
bottom: 1.25em;
right: 1.5em;
z-index: 99;font-size: 1em;
border: none;
outline: none;
background-color: #555;
color: white;
cursor: pointer;
padding: 1em;
border-radius: .5em;
opacity: 0.5;
}

#TopBtn:hover {
background-color: #555;
opacity: 1;
}

  
body {  
  height: 2000px;
  width: auto;
  background-color: blue;
  color: white;
  overflow: scroll;
  }
<div onscroll="scrollFunction();">
Scroll the page
</div>

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

Additionally, in your coding environment, you can import scripts into your HTML file in a format similar to the below:

<!DOCTYPE html>
<HTML>

<head>
<!-- import additional CSS along with other meta data, etc.. in the head -->
<link href="common.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- Everything else that makes the body of your document can go within the body tags -->
<button onclick="topFunction()" id="TopBtn" title="Go to top">Top</button>
<script type="text/javascript" src="common.js"></script>
</body>

</html>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top