Scroll to div ID

<!DOCTYPE html>
<html>
<head>
	<title>Scroll to div ID | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Scroll to div ID">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-md btn-info" onClick="scrollToBottom('div')">Scroll Div to Bottom</button>
                <button class="btn btn-md btn-info" onClick="scrollSmoothToBottom('div')">Scroll Smooth to Bottom</button>
                <div id="div" class="text-center">
                   This is Top of Div
                  <span>This is Bottom of Div</span>
                </div>
                <button class="btn btn-md btn-primary" onClick="scrollToTop('div')">Scroll Div to Top</button>
                <button class="btn btn-md btn-primary" onClick="scrollSmoothToTop('div')">Scroll Smooth to Top</button>
            </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>                      
<script src="script.js"></script> 
</body>
</html>
body {
    overflow-x: hidden;
    overflow-y: visible;
    background-color: #EEE;
}
#div {
    width: 100%;
    height: 600px;
    overflow-x: hidden;
    overflow-y: visible;
}
#div span {
    position: relative;
    top: 2000px;
}
function scrollToBottom (id) {
    var div = document.getElementById(id);
    div.scrollTop = div.scrollHeight - div.clientHeight;
}
function scrollToTop (id) {
    var div = document.getElementById(id);
    div.scrollTop = 0;
}
function scrollSmoothToBottom (id) {
    var div = document.getElementById(id);
    $('#' + id).animate({
        scrollTop: div.scrollHeight - div.clientHeight
    }, 500);
}
function scrollSmoothToTop (id) {
    var div = document.getElementById(id);
    $('#' + id).animate({
        scrollTop: 0
    }, 500);
}

Arrows Defense Game

Arrows Defense Game

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Bootstrap4 01

Card Bootstrap4 01

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Drag and drop or upload input file

Drag and drop or upload input file

Image hover effects style

Image hover effects style

Login Bootstrap3

Login Bootstrap3

Responsive image grid

Responsive image grid

Simple Table With UIKIT

Simple Table With UIKIT

Timeline style01

Timeline style01

Timeline style02

Timeline style02

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css