How to create sub-views that have the scroll area of their parent view

[Falko]

I will now explain how you can have a site that has one very long view that contains several sections that have their own URL but that still use the scrolling area of the long parent view. Here is an example what it could look like:

 

 The red box is the area of the home view and the green views are sub section of home. If you visit the site you could land on /home and scroll all the way to the bottom but also if you land on /bio or /contact you can scroll all the way to the top and the bottom of home. That means the scroll area is valid for all views in the example.

All you have to do to achieve this is to open the Hackershell with ctrl + m  go to the JS tab and paste in the following code. (Don't forget to save and reload it when you are done) 

var subpages = {
  bio: 'home', // bio is set as a sub view of home
  contact: 'home', // contact is set as a sub view of home
}


$(app).on('view_changed', function(e, page) {
  if(page in subpages){
    var viewobject = app.views.where({
      name: subpages[page]
    })[0]
    var scroll = viewobject.objectScrollPosition(app.compositor.getObjectById(app.this_view.view_object.db.id));
    app.this_view.set(viewobject.attributes);
    require(["app/view"], function(ModuleView) {
      ModuleView.transformToView(subpages[page], 1, scroll);
    });
  }
});

to make this work for you, you only need to configure the first 3 lines of the script, where you specify the parent- to sub-view relationship. You can add as many sub views as you want and you can also create several different parent-sub-view relationships all below each other:

var subpages = {
  subv1: 'parent',
  subv2: 'parent',
  awards: 'about',
  location: 'about',
  time: 'about',
}

To make it perfect, you should check that the parent and the sub view have the same width and are vertically aligned.

Are there any other advantages of creating sub views this way? Yes, each view can be indexed by Google separately  which helps you to get a better search index score.