如何将动态链接也滚动到锚点

时间:2015-08-06 21:43:56

标签: javascript php jquery html wordpress

我研究了这个并且找不到答案。我发现的解决方案并没有取得成功。

我正在构建一个WordPress模板,我有一个包含动态标签的部分。当用户选择特定选项卡时,其下方的数据会相应更改。

但是,我无法像普通的页内锚点那样向下滚动焦点。我的相关代码是:

链接

<a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span><?php the_sub_field('work_tab_title');?></span></a>`

<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">

除了锚点的滚动/焦点外,我当前的功能在标签更改方面有效。如果我能给你一个URL,这会更容易,但我不确定这是否违反礼节,请告诉我。

谢谢

对于上下文和更好的理解,需要更大的代码部分:

    <div class="container">

  <ul class="tab-strips">

    <?php $i=0; $j=1; while(has_sub_field('work_slider')):?>

    <?php 

                        $string=get_sub_field('work_tab_title');?>

    <li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>

      <?php the_sub_field('work_tab_title');?>

      </span></a></li>

    <?php $i++; $j++; endwhile;?>

  </ul>

</div>

<?php $i=1; while(has_sub_field('work_slider')): ?>

<?php $string = get_sub_field('work_tab_title'); ?>

<?php $slider_title = get_sub_field('slider_title'); ?>

<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">

<?php  ?>
<script type="text/javascript">
   document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>

  <?php if(get_sub_field('inner_slider')):?>

  <div class="container">
    <div class="row" style="margin-left:9.6%;">
          <h3>
            <?php echo $slider_title; ?>
          </h3>
    </div>
  </div>

  <div class="slider">

    <div class="container">

      <div class="row">

        <ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">

          <?php $j=0; while(has_sub_field('inner_slider')):?>

          <li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">

            <?php the_sub_field('work_inner_title');?>

            </a></li>

          <?php $j++; endwhile;?>

        </ul>

      </div>

    </div>

  </div><!-- slider -->

0 个答案:

没有答案