css：target - 焦点

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看起来最不好的选择是将窗口的滚动位置存储在一个变量中，并且＆＃34; animate＆＃34;对它...

<强> 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
    });
});

Answer 2

这不能在CSS中完成，但一些Javascript将解决它：

$('.trigger').on('click', function( e ) {
    e.preventDefault();
});