I created a simple Html file using Google Apps Script and deployed it as a web app. Although I added link to some elements on the same page, it doesn't jump to the designated elements and returns blank page.
Here is a snippet of the html.
<ul>
<li><a href ="#april">April</a></li>
<li><a href ="#may">May</a></li>
<li><a href ="#june">June</a></li>
</ul>
.
.
.
<a id="april">2019/04</a>
.
.
.
<a id="may">2019/05</a>
.
.
.
<a id="june">2019/06</a>
.
.
.
When I clicked the elements, it redirects to another URL like this.
https://{scriptid}-script.googleusercontent.com/userCodeAppPanel#id
I tried access to {url}+{#id} and it gave me the same page. So the id attribute seems not working, but I don't know what to fix. What am I doing wrong here?
EDIT This is what I've tried so far. https://script.google.com/macros/s/AKfycbyW5FRfQP3CpOU0brJEeeSgR6xypQ57jAjDs5KfQFYRmYIaaBs/exec
gs file
function doGet() {
return HtmlService.createTemplateFromFile('index').evaluate();
}
html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
1
<br>
2
<br>
3
<br>
4
<br>
5
<br>
<a name="top">Top</a>
</head>
<body>
<br><br><br><br><br>
<a href="#top">Goto Top(blank page)</a>
<br>
<a href="https://script.google.com/macros/s/AKfycbyW5FRfQP3CpOU0brJEeeSgR6xypQ57jAjDs5KfQFYRmYIaaBs/exec#top">Goto Top(just reload)</a>
</body>
</html>
The following function works fine for me in Google apps script web app. Try setting base to _self or leave blank:
<!DOCTYPE html>
<html lang="en">
<head>
<base />
<meta charset="UTF-8" />
<title>#top Demo</title>
</head>
<body>
<div>
<ul id="navigation">
<li>
<a href="#bottom">Click here to go to the bottom</a>
Lorum ipsum1
</li>
<li>
<a href="#middle">Click here to go to the middle</a>
Lorum ipsum2
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum3
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum4
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum5
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum6
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum7
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum8
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum9
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum10
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum11
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum12
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum13
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum14
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum15
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum16
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum17
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum18
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum19
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum20
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum21
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum22
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum23
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum24
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum25
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum26
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum27
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum28
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum29
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum30
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum31
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum32
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum33
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum34
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum35
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum36
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum37
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum38
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum39
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum40
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum41
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum42
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum43
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum44
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum45
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum46
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum47
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum48
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum49
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum50
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum51
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum52
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum53
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum54
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum55
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum56
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum57
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum58
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum59
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum60
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum61
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum62
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum63
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum64
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum65
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum66
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum67
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum68
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum69
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum70
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum71
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum72
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum73
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum74
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum75
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum76
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum77
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum78
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum79
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum80
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum81
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum82
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum83
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum84
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum85
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum86
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum87
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum88
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum89
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum90
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum91
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum92
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum93
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum94
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum95
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum96
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum97
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum98
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum99
</li>
<li>
<a id="middle" href="#top">Click here to go top</a>
Lorum ipsum100
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum101
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum102
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum103
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum104
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum105
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum106
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum107
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum108
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum109
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum110
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum111
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum112
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum113
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum114
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum115
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum116
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum117
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum118
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum119
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum120
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum121
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum122
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum123
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum124
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum125
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum126
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum127
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum128
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum129
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum130
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum131
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum132
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum133
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum134
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum135
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum136
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum137
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum138
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum139
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum140
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum141
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum142
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum143
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum144
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum145
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum146
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum147
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum148
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum149
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum150
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum151
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum152
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum153
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum154
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum155
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum156
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum157
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum158
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum159
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum160
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum161
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum162
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum163
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum164
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum165
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum166
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum167
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum168
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum169
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum170
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum171
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum172
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum173
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum174
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum175
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum176
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum177
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum178
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum179
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum180
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum181
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum182
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum183
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum184
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum185
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum186
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum187
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum188
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum189
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum190
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum191
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum192
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum193
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum194
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum195
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum196
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum197
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum198
</li>
<li>
<a href="#top">Click here to go top</a>
Lorum ipsum199
</li>
<li>
<a id="bottom" href="#top">Click here to go top</a>
Lorum ipsum200
</li>
</ul>
</div>
</body>
</html>