如何修复css滑块中的锚点？

Question

我有一个没有脚本的滑块。但是有一个小问题，它适用于锚点，因此当交换机滑动时页面会一直滚动。 有没有什么办法解决这一问题？ 如果我添加event.preventDefault（），则滑块不起作用。

我是从这个网站上获取的：accordion

这是我的haml代码：

%article.accordion
  %section#slide1.blue
    %h2 
      = link_to 'Slide 1', '#slide1'
    %p Some text
  %section#slide2.grey
    %h2 
      = link_to 'Slide 2', '#slide2'
    %p Some text
  %section#slide3.green
    %h2 
      = link_to 'Slide 3', '#slide3'
    %p Some text
  %section#slide4.light-blue
    %h2
      = link_to 'Slide 4', '#slide4'
    %p Some text

这是sass：

article.accordion
  display: block
  width: 100%
  margin: 0  auto
  overflow: auto
  section
    position: relative
    display: block
    float: left
    width: 4%
    height: 370px
    overflow: hidden
    margin: 1px
    h2
      position: absolute
      font-size: 1em
      font-weight: bold
      width: 185px
      height: 4%
      top: 185px
      text-align: left
      right: 0
      text-indent: 1em
      padding: 0
      margin: 0
      color: #ddd
      -webkit-transform-origin: 100% 0%
      -moz-transform-origin: 100% 0%
      -ms-transform-origin: 100% 0%
      -o-transform-origin: 100% 0%
      transform-origin: 100% 0%
      -webkit-transform: rotate(90deg)
      -moz-transform: rotate(90deg)
      -ms-transform: rotate(90deg)
      -o-transform: rotate(90deg)
      transform: rotate(90deg)
      a
        display: block
        width: 100%
        line-height: 2.8em
        text-decoration: none
        color: inherit
        outline: 0 none
    &:target
      width: 87%
      padding: 0 1em
      color: $color-blue
      background-color: #fff
      h2  
        color: $color-white


article.accordion
  position:relative
  section, section h2
    -webkit-transition: all 1s ease
    -moz-transition: all 1s ease
    -ms-transition: all 1s ease
    -o-transition: all 1s ease
    transition: all 1s ease