All geek questions in one place

Scroll to an item on the page using item identifiers, Meteor

My question is simple, but I'm struggling to find the answer. I use a meteorite to create a website. With my meteorite, I use an iron router to navigate my AKA template pages. My head always stays the same. I only change the body, changing the template that is contained in the body using an iron router. I have a page containing anchor tags with identifiers, I want the page to automatically scroll to a specific anchor on my web page when my template changes due to the user navigating to this page . Unfortunately, I can only provide code snippets, because I am creating a web page for the company and do not want information leakage. I think there will be enough code fragments.

I tried the onAfterRun iron router:

Router.map(function(){
this.route("cpdEvents", {
    path: "cpd.html#events",
    onAfterRun: function() {
        e.preventDefault();
            $('html, body').animate({
            scrollTop: $("a[name=events]").offset().top
            }, 600);
    }
    });
});

:

if (Meteor.isClient) {
Template.cpd.rendered = function (){
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("a[name=events]").offset().top
    }, 600);
}
}

, , . html cpd.html, . JavaScript .

index.html

<head>
<meta ..... />
<title></title>
</head>
<body>
{{> index}}
</div>
</body>

cpd.html:

<template name="cpd">
....
<a name="events"></a>
....
</template>

:

Meteor jquery-, , jquery .

, , HTML. , "#" URL-. www.example.com/cpdEvents#events

+4
2

, , . r , href.

<li><a href="{{pathFor 'posts.index'}}"><span class='glyphicon glyphicon-home'></span> Blog</a></li>
<li><a href="{{pathFor 'overview' hash='about'}}"><span class='glyphicon glyphicon-user'></span> About Me</a></li>
<li><a href="{{pathFor 'overview' hash='meetup'}}"><span class='glyphicon glyphicon-map-marker'></span>My Meetup</a></li>
<li><a href="{{pathFor 'overview' hash='contact'}}"><span class='glyphicon glyphicon-envelope'></span> Contact Me</a></li>

, . scrollToHash, .

Router._scrollToHash = function(hash) {
  var section = $(hash);
  if (section.length) {
    var sectionTop = section.offset().top;
    $("html, body").animate({
      scrollTop: sectionTop
    }, "slow");
  }
};

- . navbar aboutme, meetup, contact, .

+8

jQuery :

$(document).scrollTop( $("#myElement").offset().top );

#myElement id , , div .

:

Template.myTemplate.rendered = function() { $(document).scrollTop($ ( "# myElement" ). offset(). top); }

, , , . . , .

0

Source: https://habr.com/ru/post/1569398/

More articles:


All Articles