Якорь для элемента с jashcript-хэш-маршрутизатором

Question

Я использую Parse-SDK-JS, Handlebars.js и хэш-маршрутизацию для создания динамической веб-страницы. Когда пользователь нажимает на любую ссылку, я вызываю шаблон с использованием URL-адреса следующим образом: http://www.website.com/#/admin.

маршрутизатор

BlogApp.Router = Parse.Router.extend({ 

     start: function() { 
      Parse.history.start({root: '/beta/'}); 
     }, 

     routes: { 
      '': 'index', 
      'blog/:url': 'blog', 
      'category/:url': 'category', 
      'admin': 'admin', 
      'login': 'login', 
      'reset': 'reset', 
      'logout': 'logout', 
      'add': 'add', 
      'register': 'register', 
      'editprofile': 'editprofile', 
      'changeprofilepic': 'changeprofilepic', 
      ':username': 'userprofile' 
     }, 

     index: function() { 
      BlogApp.fn.setPageType('blog'); 

      $blogs = []; 

      if (!currentUser) { 
       Parse.history.navigate('#/register', {trigger: true}); 
       console.log("There is no logged in user."); 
      } else { 
       var groupId = currentUser.get('groupId'); 
       var designsQuery = new Parse.Query(BlogApp.Models.Blog).equalTo('groupId', groupId).include('author').descending('lastReplyUpdatedAt').limit(50); 
       designsQuery.find({success: function (blogs) { 

       for (var i in blogs) { 
        var des = blogs[i].toJSON(); 
        des.author = blogs[i].get('author').toJSON(); 
        $blogs.push(des); 
       } 
       // console.log(blogs); 

       BlogApp.fn.renderView({ 
        View: BlogApp.Views.Blogs, 
        data: {blogs: $blogs} 

       }); 
      }, error: function (blogs, e) { 
       console.log(JSON.stringify(e)); 
      }}); 
      } 
     }, 
}); 

Посмотреть

BlogApp.Views.Blogs = Parse.View.extend({ 
     template: Handlebars.compile($('#blogs-tpl').html()), 
     className: 'blog-post', 

     render: function() { 
      var collection = {blog: []}; 
      collection = {blog: this.options.blogs}; 
      this.$el.html(this.template(collection)); 
     }, 
    }); 

Моя проблема заключается в том, что при загрузке нового шаблона, пользователь не отправляется в верхней части страницы, то есть к следующему div:

<div id="main-nav"></div> 

Позиция прокрутки пользователей на странице не изменяется, если новая страница длиннее текущей. Пользователь просто заканчивается где-то посередине страницы, потому что новый шаблон загружен, но они не привязаны ни к чему новому.

Обычно в HTML я бы открыть новую страницу для конкретного анкера с чем-то вроде этого: http://www.website.com/page#container если бы я хотел, но с тем, как я настроил свой хэш маршрутизацию якоря является шаблон называют себя, так что я не может сделать что-то вроде этого: http://www.website.com/#/admin#container.

Надеюсь, это имеет смысл.

Как я могу всегда отправлять пользователя в контейнер «div» при загрузке нового шаблона в мое представление?

Answer 1

Я решил это, прокручивая элемент после создания представления.

 cookies: function() { 
      BlogApp.fn.setPageType('cookies'); 
      BlogApp.fn.renderView({ 
       View: BlogApp.Views.Cookies 
      }); 

      document.getElementById('main-nav').scrollIntoView(); 
     }, 

Лучше ... добавив функцию scrollIntoView() после того, как данные визуализируются в поле зрения объекта, так что это работает для всех звеньев в маршрутизаторе без стольких копий пасты.