用JavaScript哈希路由器锚定元素

我使用Parse-SDK-JS,Handlebars.js和哈希路由来创建动态网页。当用户点击任何链接时，我使用以下方式使用URL调用模板：http://www.website.com/#/admin。用JavaScript哈希路由器锚定元素

路由器

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，如果我想，但我的方式成立了我的哈希路由锚是模板调用自身，所以我不能做这样的事情：。

我希望这是有道理的。

如何在将新模板加载到我的视图中时始终将用户发送到div“容器”？

来源

2017-01-09 santafebound

我通过在View生成后滚动到一个元素来解决这个问题。

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

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

更好......由数据渲染到视图对象之后，使这部作品在路由器没有这么多副本面食的所有链接添加scrollIntoView（）函数。

BlogApp.fn.renderView = function (options) { 
     var View = options.View, // type of View 
      data = options.data || null, // data obj to render in the view 
      $container = options.$container || BlogApp.$container, // container to put the view 
      notInsert = options.notInsert, // put the el in the container or return el as HTML 
      view = new View(data); 
      view.render(); 
      if (notInsert) { 
       return view.el.outerHTML; 
      } else { 
       $container.html(view.el); 
       document.getElementById('main-nav').scrollIntoView(); 
      } 
     };

来源

2017-01-09 13:32:45 santafebound

用JavaScript哈希路由器锚定元素

回答

相关问题