I attached my two card types that are giving em trouble. When I flip the card it will scroll up slightly to the answer but then it scrolls down a bit so I can’t see the answer without manually scrolling…
Anki 2.1.33 on Mac OS
Tried with all add ons disabled and even played with hr id=answer with no luck
The Back Template contains <hr>. Replace it with <hr id=answer>.
The ‘id=answer’ part tells Anki where the divider is between the question and the answer. This allows Anki to automatically scroll to the spot where the answer starts when you press ‘show answer’ on a long card (especially useful on mobile devices with small screens).
https://docs.ankiweb.net/#/templates/fields?id=basic-replacements
I already tried messing with that with no luck
Yeah its messed up because the answer is the close deletion at the top of the card
Perhaps the card thinks the extra field is the answer? I dont know how to change it though.
I’m sorry, but I don’t understand. I replaced <hr> with <hr id=answer>, and Anki scrolls to it, i.e. to the horizontal line, once the answer is shown. The gif looks good to me and works as expected.
Another problem, though it might not be relevant here, is that the HTML formatting is broken for the Back Template. A lot of <div> tags were left open and not closed with </div>.
{{edit:cloze:Text}}
</div>
<br><hr>
{{edit:Extra}}
<div class=editcloze style="font-size:18px;color:#fc0107;font-family:Times;font-style:;letter-spacing:-2px;position:fixed;bottom:1px;right:5px;opacity:.9;"><a href="https://docs.google.com/forms/d/e/1FAIpQLSerA_neKHlbo8U4nJEVgkcOIltPoqL8d2Fu_9Te_C9Tvy_dtg/viewform?usp=sf_link">Submit Errata Link</a><br>
Note id:{{noteid}}
<div id=text>
<div id=extra>
It might not be too big of a problem, aside of some possible styling issues, as the web browser will try to fix it somehow. In this case, the last line <div> id=extra> will be replaced with <div id=extra></div></div></div></div>.
On second thoughts, </div> might produce an unexpected behaviour as it was used without any open <div> tag before it. Maybe this is relevent to the issue with scrolling.
If you run the code through The W3C Markup Validation Service, some errors could be ignored, but it’ll report
Error Stray end tag
div.
Error End of file seen and there were open elements.
Error Unclosed element
div.
I’d suggest to replace the Back Template with something like
{{edit:cloze:Text}}
<br><hr id=answer>
{{edit:Extra}}
<div class=editcloze style="font-size:18px;color:#fc0107;font-family:Times;font-style:;letter-spacing:-2px;position:fixed;bottom:1px;right:5px;opacity:.9;"><a href="https://docs.google.com/forms/d/e/1FAIpQLSerA_neKHlbo8U4nJEVgkcOIltPoqL8d2Fu_9Te_C9Tvy_dtg/viewform?usp=sf_link">Submit Errata Link</a></div>
Note id:{{noteid}}
<div id=text></div>
<div id=extra></div>
The sample deck also contained the second note type, but it was more like Image Occlusion, there was no horizontal line, nothing to scroll for, and I ignored it.
As an alternative, BeautifulSoup can be used to automatically “fix” the broken HTML code.
https://repl.it/repls/KindheartedIndelibleFilesize
After clicking on Run, it’ll output something like
{{edit:cloze:Text}}
<br/><hr/>
{{edit:Extra}}
<div class="editcloze" style="font-size:18px;color:#fc0107;font-family:Times;font-style:;letter-spacing:-2px;position:fixed;bottom:1px;right:5px;opacity:.9;"><a href="https://docs.google.com/forms/d/e/1FAIpQLSerA_neKHlbo8U4nJEVgkcOIltPoqL8d2Fu_9Te_C9Tvy_dtg/viewform?usp=sf_link">Submit Errata Link</a><br/>
Note id:{{noteid}}
<div id="text">
<div id="extra">
</div></div></div>
I switched to this code (sorry idk how to copy and paste the code without it not showing up) It is still scrolling. So when you go to study the card scroll to the bottom of the card, slick show answer, it SHOULD scroll to the top of the card because the close deletion is the answer. I do not want it to scroll to the extra field.
PS: The “image occlusion” is actually a cloze hide all card and I would also like to scroll to the top when I click show answer.
It makes sense now. It can be done by using the example code from Writing Anki Add-ons manual and adding it to the end of the Back Template. And if the card template contains id=answer, remove it.
https://addon-docs.ankiweb.net/#/more?id=javascript
<script>
onUpdateHook.push(function() {
window.scrollTo(0, 0);
})
</script>
or
<script>
setTimeout(function() {
window.scrollTo(0, 0);
}, 0);
</script>
or with jQuery for a smooth scrolling effect.
<script>
$("html").animate({ scrollTop: 0 }, "fast");
</script>
The last two seem to work most of the time, however if I press space bar instead of enter or show answer then it scrolls to the top and then back down a little. Have you been able to get it to work with pressing space bar?
The first one with onUpdateHook should work too on the desktop version of Anki.
Yes, I added the script to the end of the back template, pressed the space bar to show the answer and everything seems to work fine. It scrolls up to the top.
The card template formatting should not be a problem as any stray </div> or unclosed <div> tags will be automatically fixed.
I’m not sure where is the problem and don’t have any ideas what could cause it. If I could reproduce it, maybe I could do something about it, but at the moment I’m not sure how I could help with it. Maybe update to the latest Anki version and try without add-ons.
So I think I know the issue just no idea how to fix it. I have noticed it does the continuous scroll after I hit reveal. Do you know if I am in the process of scrolling down when I click to reveal or spacebar for it to cancel the scrolling down action before it scrolls up? Does this make sense what I am asking?
I’m afraid not.
Maybe record the screen, maybe with Windows 10 built-in screen recorder or ShareX or something else, but I’d still need a sample deck and if I can’t reproduce it myself, I won’t be able to investigate the issue, or if I can reproduce it, it could be beyond my abilities to fix it.
Try to press space as your scrolling down, don’t wait until you get to the bottom.
Remove <hr id=answer> from the 2nd line in the Back Template or replace it with <hr>.
Same issue 
Try without add-ons.
No add ons turned on:
Video: https://drive.google.com/file/d/1piKB4sikq20KPXfkbozo1mk6e7s4ct0F/view?usp=sharing
Card type: https://drive.google.com/file/d/1lAZ9r2L30weqO1047RqwuZEovUMnUtS5/view?usp=sharing
It really just seems that the scrolling while pressing spacebar is the issue. If I pause for 1 full second and then press spacebar no problem.
Try to delete <script>...</script> from the end of the Front Template, i.e. replace
{{cloze:Text}}
<script>
...
</script>
with just
{{cloze:Text}}
