I need scrolling effect in HTML Dialog of Google Apps Script.
https://docs.google.com/spreadsheets/d/1IHf2SkmoEyxDAs86FIdHWKfQ19i19-jUDFDlbMKJE8A/copy is what I have tried, The code is also placed in the code editor.
When Highlight buttons are pressed its highlighting but not scrolling when the html code is placed in HTML dialog.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.sidebar{padding:0}
.branding-below {
bottom: 80px;
top: 0;
}
</style>
<body>
<div class="sidebar branding-below" data-select2-id="58">
<div class="block">
<div id="main">
<button onclick="highlightSelect2('#sel3')" >Highlight sel3</button>
<button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
<button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
<br/>
<br/>
<table border="0" id="fields" style="padding:5px;width:100%;table-layout:fixed;">
<tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel1">
<option>Example0 test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel2">
<option>Example1 test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel3">
<option>Example3 test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel4">
<option>Alpha test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel5">
<option>Alpha test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel6">
<option>Alpha test</option>
<option>Beta test</option>
</select>
<br/>
<br/>
<br/>
<br/>
<br/>
</tr>
<tr>
<td class="gray" colspan="2">
<select class="field" style="width:50%" id="sel7">
<option>Alpha test</option>
<option>Beta test</option>
</select>
</tr>
</table>
<br/>
<br/>
<br/>
<br/>
<br/>
<button onclick="highlightSelect2('#sel3')" >Highlight sel3</button>
<button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
<button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
</div>
</div>
</div>
<div class="sidebar bottom">
<table width="100%" style="table-layout:fixed;">
<tbody>
<tr>
<td colspan="2" style="border-bottom:0px;" align="left">
<small align="center" id="status"></small> 
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button id="reset">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function highlightSelect2(selector) {
$(selector)
.next(".select2-container")
.find(".select2-selection")
.effect("highlight", {
color: "#f88"
}, 10000);
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 1000);
}
$(document).ready(function () {
$('select').select2();
listen("select")
});
function listen(selector)
{
$(selector).on('change', function() {
alert("Cannot use this field as you have already used!");
highlightSelect2("#sel7")
$(this).val("");
});
}
</script>
</body>
</html>