home
  • Blog
1.12
  • Getting Started
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Ember Inspector
  • Cookbook
    • Introduction
    • Contributing
    • User Interface and Interaction
      • Introduction
      • Adding CSS Classes to Your Components
      • Adding CSS Classes to Your Components Based on Properties
      • Focusing a Textfield after It's Been Inserted
      • Displaying Formatted Dates With Moment.js
      • Specifying Data-Driven Areas of Templates That Do Not Need To Update
      • Using Modal Dialogs
      • Resetting scroll on route changes
    • Event Handling & Data Binding
    • Helpers & Components
    • Working with Objects
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.12.0.
Go to v5.0.0

Resetting scroll on route changes

Edit pencil

Problem

The page scroller keeps in the same position when you go from one page to another. For instance, if you scroll down a long list of displayed elements on a page and then you navigate to another page with another long list of elements, you should be able to notice that scroll position is not being reset.

Solution

Add the following mixin to the affected Routes:

app/mixins/reset-scroll.js
export default Ember.Mixin.create({
  activate: function() {
    this._super();
    window.scrollTo(0,0);
  }
});

Only if you need do something on the activate method you must call this._super() at the beginning:

app/routes/index.js
import ResetScroll from '../mixins/reset-scroll/';

export default Ember.Route.extend(ResetScroll, {
  //I need to do other things with activate
  activate: function() {
    this._super.apply(this, arguments); // Call super at the beginning
    // Your stuff
  }
});
left arrow
Using Modal Dialogs
We've finished covering User Interface and Interaction. Next up: Event Handling & Data Binding - Introduction
right arrow
On this page

  • Problem
  • Solution
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue