href on the same page not works on Rails 4

Question

I want to provide an nav bar with hyperlinks which links to another section in the same page,

But it didn't work.

When I cliked the service link on the nav bar, the url has changed in the broswer from http://localhost:3000 to http://localhost:3000/#.service

But the browser didn't move the window to the service section

Here's my nav bar haml code

    %li
      %a{href: "#"} Home
    %li
      %a{href: "#.service"} Service

Here is the page's haml source code

.service
  / Start service
  .container
    %h2.head SERVICE
    %p.para Et harum quidem rerum et expedita distinctio.
    .service-top
      .row
        .col-md-3.col-sm-3
          / Service top item
          .text-center
            .simg
              / Images
              %img.simg-one.animated{alt: "", src: "img/service/12.png"}/
              %img.simg-two.animated{alt: "", src: "img/service/11.png"}/
            / Heading
            %h3 Mail Box

Answer 1

You should read up on HTML anchor tags

---

You need to link to an anchor, which is defined as a name or ID in your HTML:

%a{href: "#service"}

.service{ id: "service" }

As I was researching this answer, I actually discovered you shouldn't use name any more, but ID instead (HTML5 doesn't support name):

name
Not supported in HTML5. Use the id attribute instead. Specifies the name of an anchor