html - CSS :target - focus

Question

我使用 :target 来更改显示的页面内容，这没问题。但是我有一个问题，它跳转到 url 中 # 选择的 dom 元素，我不想这样做。所以我想做的就是选择一个不同的点来跳跃。这是在 wordpress 中。有什么办法可以解决这个问题，也许在 :target css 中？

html:

<article class="tabs">

<section id="Vehicle-Subscriptions">
    <h2><a href="#Vehicle-Subscriptions">Vehicles</a></h2>
    <p>Page 1</p>
</section>

<section id="Job-Subscriptions">
    <h2><a href="#Job-Subscriptions">Jobs</a></h2>
    <p>page 2</p>
</section>

<section id="Property-Subscriptions">
    <h2><a href="#Property-Subscriptions">Property</a></h2>
    <p>page 3</p>
</section>

</article>

CSS:

article.tabs
{
   position: relative;
   display: block;
   width: 90%;
   height: 15em;
   margin: 2em auto; 
}

article.tabs section
{
   position: absolute;
   display: block;
   top: 1.8em;
   width: 100%;
   left: 0;
   height: 12em;
   padding: 10px 20px;
   background-color: #ddd;
   border-radius: 5px;
   box-shadow: 0 3px 3px rgba(0,0,0,0.1);
   z-index: 0;
}


article.tabs section:first-child
{
   z-index: 1;
}

article.tabs section h2
{
   position: absolute;
   font-size: 1em;
   font-weight: normal;
   width:   15%;
   min-height: 1.8em;
   top: -1.8em;
   left: 0px;
   padding: 0;
   margin: 0;
   color: #999;
   border-style: solid;
   border-color: black;
   border-width: 3px ;
   background-color:#0af515;
   border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(2) h2
{
left: 22%;
}

article.tabs section:nth-child(3) h2
{
   left: 42.8%;
}

article.tabs section:nth-child(4) h2
{
    left: 63.5%;
}

article.tabs section:nth-child(5) h2
{
   left: 84.25%;
}


article.tabs section h2 a
{
   display: block;
   width: 100%;
   line-height: 1.8em;
   text-align: center;
   text-decoration: none;
   color: inherit;
   outline: 0 none;
}

article.tabs section:target,
article.tabs section:target h2
{
   color: #333;
   background-color: #fff;
   z-index: 2;
}

article.tabs section,
article.tabs section h2
{
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   transition: all 500ms ease;
}

Answer 1

不幸的是，您似乎无法单独使用 css 来做到这一点，并且
preventDefault() probably wont work either看起来最不坏的选择是将窗口的滚动位置存储在一个变量中并为其“设置动画”...

Working Example

$("a[href^=#]").on("click", function (e) { // when #link is clicked
    var scroll = $(window).scrollTop(); // store window scrollTop in var
    $("html, body").animate({ // animate to stored position
        scrollTop: scroll
    });
});