手动滚动到ID甚至滚动到顶部时是否更改url? [英] Change url when manually scrolled to an id even scrolling to top?

问题描述

当我滚动到ID时，是否可以立即更改地址栏中的URL?或者，当我按下新的ID时，甚至从下往上滚动表格，都需要一个包含多个ID的长文档，并且地址栏上的URL也会更改.

我使用手动滚动到锚点时更改url吗?

但是当从底部滚动到顶部时，这不起作用.

 $(function () {
  var currentHash = "#";
  $(document).scroll(function () {
    $('.block').each(function () {
      var top = window.pageYOffset;
      var distance = top - $(this).offset().top;
      var hash = $(this).attr('id');
      // 30 is an arbitrary padding choice, 
      // if you want a precise check then use distance===0
      if (distance < 30 && distance > -30 && currentHash != hash) {
        window.location.hash = (hash);
        currentHash = hash;
      }
    });
  });
}); 

 body {
  margin: 0px;
}
div {
  height: 900px;
  text-align: center;
  padding: 15px;
  background-color: #00f;
}
div:nth-child(even) { background: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="block" id="one">Block 1</div>
<div class="block" id="two">Block 2</div>
<div class="block" id="three">Block 3</div>
<div class="block" id="four">Block 4</div>
<div class="block" id="five">Block 5</div> 

谢谢.

解决方案

发表评论后，我了解您要实现的目标:

以下代码基于上/下滚动.

将存储当前块并使您在块之间跳转":

$(function () {
  var blocksArr = $('.block');
  var lastScrollTop = 0;
  var currentBlock = 0;


  $(document).scroll(function () {
    var st = $(this).scrollTop();
    var hash;

    //make sure it is in the boundaries     
    if (st > lastScrollTop && currentBlock< blocksArr.length -1){
    // downscroll code
         hash = $(blocksArr[++currentBlock]).attr('id');
         window.location.hash = (hash);
    }
    else 
        if (st < lastScrollTop && currentBlock > 0){
    // scrollup code
        hash = $(blocksArr[--currentBlock]).attr('id');
        window.location.hash = (hash);
    }

    lastScrollTop = $(this).scrollTop();
  });
});

工作中的小提琴(小提琴的哈希值不会改变)

已添加:

如果您只想查看URL更改:

$(function () {
  var currentHash = "#";
  var blocksArr = $('.block');

  $(document).scroll(function () {
     var currentTop = window.pageYOffset/1;
     for (var i=0; blocksArr.length; i++){
         var currentElementTop = $(blocksArr[i]).offset().top;
         var hash = $(blocksArr[i]).attr('id');
         if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){
                if(history.pushState) {
                history.pushState(null, null, '#'+hash);
        }
        else {
            location.hash = '#'+hash;
        }
                currentHash = hash;
         }

     }

  });
});

Is it possible to change the URL in the address bar instantly when I scroll to an id? Or have a long document with multiple id and the url changes on address bar, when I hit a new id even i scroll form bottom to top.

i use Change url when manually scrolled to an anchor?

but this is not working when scroll from bottom to top.

$(function () {
  var currentHash = "#";
  $(document).scroll(function () {
    $('.block').each(function () {
      var top = window.pageYOffset;
      var distance = top - $(this).offset().top;
      var hash = $(this).attr('id');
      // 30 is an arbitrary padding choice, 
      // if you want a precise check then use distance===0
      if (distance < 30 && distance > -30 && currentHash != hash) {
        window.location.hash = (hash);
        currentHash = hash;
      }
    });
  });
});

body {
  margin: 0px;
}
div {
  height: 900px;
  text-align: center;
  padding: 15px;
  background-color: #00f;
}
div:nth-child(even) { background: #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="block" id="one">Block 1</div>
<div class="block" id="two">Block 2</div>
<div class="block" id="three">Block 3</div>
<div class="block" id="four">Block 4</div>
<div class="block" id="five">Block 5</div>

Thanks in advance.

解决方案

After your comment, I understand what you are trying to achieve:

The following code is based on scroll up/ down.

Will store the current block and make you "jump" between blocks:

$(function () {
  var blocksArr = $('.block');
  var lastScrollTop = 0;
  var currentBlock = 0;


  $(document).scroll(function () {
    var st = $(this).scrollTop();
    var hash;

    //make sure it is in the boundaries     
    if (st > lastScrollTop && currentBlock< blocksArr.length -1){
    // downscroll code
         hash = $(blocksArr[++currentBlock]).attr('id');
         window.location.hash = (hash);
    }
    else 
        if (st < lastScrollTop && currentBlock > 0){
    // scrollup code
        hash = $(blocksArr[--currentBlock]).attr('id');
        window.location.hash = (hash);
    }

    lastScrollTop = $(this).scrollTop();
  });
});

"working" fiddle (hash wont change on fiddle)

added:

If you only want to see the URL changes:

$(function () {
  var currentHash = "#";
  var blocksArr = $('.block');

  $(document).scroll(function () {
     var currentTop = window.pageYOffset/1;
     for (var i=0; blocksArr.length; i++){
         var currentElementTop = $(blocksArr[i]).offset().top;
         var hash = $(blocksArr[i]).attr('id');
         if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){
                if(history.pushState) {
                history.pushState(null, null, '#'+hash);
        }
        else {
            location.hash = '#'+hash;
        }
                currentHash = hash;
         }

     }

  });
});

这篇关于手动滚动到ID甚至滚动到顶部时是否更改url?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！