Scroll is ALWAYS scrolling to bottom of page Here is my method in my Vue 2 application:
private scrollToResults() {
console.log('scrolling to results now');
this.$data._showingResults = true;
const resultsElement = Array.isArray(this.$refs.results) ? this.$refs.results[0] : this.$refs.results;
(resultsElement as HTMLElement).scrollIntoView({ behavior: 'smooth' });
}
and here's my html block
<!-- RESULTS -->
<div ref="results" id="results1">
<transition name="fade">
<div :key="$data._quizComplete" class="quiz-top-content flexbox flexbox-align-stretch flexbox-justify-stretch" v-if="$data._showingResults">
<div class="quiz-main-content flexbox flexbox-column flexbox-align-start flexbox-justify-start" >
<div class="quiz-core flexbox flexbox-row">
<div class="quiz-core-content flexbox flexbox-column flexbox-align-start flexbox-justify-center" >
<h4 v-if="element.content.title" v-html="element.content.title" />
<div class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est qui, aspernatur assumenda architecto eveniet reiciendis hic. Dolore officia blanditiis provident quae nesciunt debitis a exercitationem facere, consequuntur repellendus sunt distinctio.</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est qui, aspernatur assumenda architecto eveniet reiciendis hic. Dolore officia blanditiis provident quae nesciunt debitis a exercitationem facere, consequuntur repellendus sunt distinctio.</div>
<div class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Est qui, aspernatur assumenda architecto eveniet reiciendis hic. Dolore officia blanditiis provident quae nesciunt debitis a exercitationem facere, consequuntur repellendus sunt distinctio.</div>
<div v-html="feedbackText" />
<button class="quiz-start-button quiz-summary-review"
@click="showReviewQuiz"
v-if="($data._completePercent >= element.content._reviewPercent && $data._completePercent < 100) && !$data._showQuizSummary && element.content.feedback.checkBtn"
role="button" tabindex="0"
:aria-label="element.content.feedback.checkBtn" >
{{element.content.feedback.checkBtn}}
</button>
<a class="quiz-fedback-correct-extra flexbox flexbox-column" :href='element.content.feedback.passExtras._href' target='_blank' v-if="$data._quizPassed === true && element.content.feedback.passExtras">
<img :src="element.content.feedback.passExtras._image" />
<span v-html="element.content.feedback.passExtras.title" />
</a>
<button class="quiz-start-button" v-if="$data._quizPassed === false && ($store.state.assessAttempts < Number($store.state.courseContent.global._assessAttempts))"
@click="restartQuiz"
role="button" tabindex="0"
:aria-label="element.content.feedback.retryBtn" >
{{element.content.feedback.retryBtn}}
</button>
</div>
</div>
</div>
</div>
</transition>
</div>
it is scrolling to the bottom of this
The scrollIntoView method is scrolling to the bottom of the page because it is being called on an element that is at the bottom of the page. To fix this, you can try calling scrollIntoView on a different element that is closer to the top of the page. For example, you could try calling it on the results1 element instead of the results element.
Here's an updated version of the scrollToResults method that uses the results1 element:
private scrollToResults() {
console.log('scrolling to results now');
this.$data._showingResults = true;
const resultsElement = this.$refs.results1 as HTMLElement;
resultsElement.scrollIntoView({ behavior: 'smooth' });
}
Please sign in or create an account to participate in this conversation.
