How can anchor points be located using the modal box components in iview?

problem description: when using the modal box, when the content of the modal box is very long and a scroll bar has already appeared, when I edit the following content, click Preview and want to go back to the top, for example, the message content above the modal box, the following is the mail editing form, how to get back to the top when I click Preview after editing the form?

the code is as follows:

<Modal v-model="modal" width="800" :mask-closable="false" ref="modal" :styles="{top: "20px"}">
            <p slot="header" style="color:black;text-align:left;font-size: 16px;" id="email_modal">
                 {{$t("")}}
            

<div id="edit_email"> <h2 style="color: -sharp478FCA;padding: 0px 20px;">{{$t("")}}</h2> <div class="clearfix"> <div style="float: left;padding: 0px 20px;" v-if="draftEmail.update_user.get_full_name != "" "> <i>{{draftEmail.update_user.get_full_name}} {{$t("")}} {{draftEmail.update_time}}</i></div> <div style="float: right"> <Button type="primary" size="small" @click="showEmailEdit = !showEmailEdit">{{$t("")}}</Button> </div> </div> <div class="email"> <div class="email_header"> <Row class-name="email_row"> <Col span="2" class="col_common"><span>{{ $t(":")}}</span></Col> <Col span="22">{{draftEmail.subject}}</Col> </Row> <Row class-name="email_row"> <Col span="2" class="col_common"><span>{{ $t(":")}}</span></Col> <Col span="22">{{draftEmail.receivers}} </Col> </Row> <hr class="hr_split"/> </div> <div class="email_content" v-html="draftEmail.content"> </div> </div> <h2 class="draft_email_h2"> <span @click="showEmailEdit = !showEmailEdit">{{$t("")}}</span> <Button v-show="showEmailEdit" type="primary" size="small" @click="updateEditEmail" style="float: right;">{{$t("")}}</Button> </h2> <transition name="fade"> <div style="padding: 15px 20px;" v-if="showEmailEdit"> <Form :model="draftEmail" ref="draftEmail" :rules="ruleValidate" :label-width="80"> <FormItem :label="$t("")" prop="subject_tpl"> <Input v-model="draftEmail.subject_tpl"></Input> </FormItem> <FormItem :label="$t("")"> <span>{{draftEmail.send_address}}</span> </FormItem> <FormItem :label="$t("")" prop="receivers_tpl"> <Input v-model="draftEmail.receivers_tpl"></Input> </FormItem> <FormItem :label="$t("")" prop="content_tpl"> <div class="content"> <quill-editor :options="editorOption" v-model="draftEmail.content_tpl"> </quill-editor> </div> </FormItem> <FormItem :label="$t("")"> <span><a href="-sharp" style="font-size: 14px;font-weight: bold;color: -sharpB0947F;padding-right: 5px;" @click="showLabel = true">{{$t("+")}}</a>/</span> <span><a href="-sharp" style="font-size: 14px;font-weight: bold;color: -sharpB0947F" @click="showLabel = false">{{$t("-")}}</a></span> <transition name="fade"> <div v-if="showLabel"> <div v-for="(item,key) in emailLabel">{{key}} : {{item}}</div> </div> </transition> </FormItem> </Form> </div> </transition> </div> <div slot="footer" style="text-align: center"> <Button @click="cancel">{{$t("")}}</Button> <Button type="primary" @click="updateEditEmail">{{$t("")}}</Button> <Button type="info" @click="updateEditEmail">{{$t("")}}</Button> </div> </Modal>
Mar.16,2021

ask the same question, have you solved this problem?

Menu