滚动到页面上value = 'x'

Scroll to location on page where value = 'x'

本文关键字：value 滚动      更新时间：2023-09-26

我想在我的页面顶部有一个链接，如:-

<a href="#" id="example">Scroll to</a>

基本上我想做以下事情:-

当#example被点击时，我想让它滚动到页面上h1值= 'test'的位置:-

$('#example').bind('click',function() {
    // GO TO LOCATION ON PAGE WHERE h1 value ='test' ( <h1> = 'test' </h1> )
});

这是可能的吗?

我知道我可以为此使用锚，但我使用的是一个菜单插件，它不添加这个，所以我需要根据值是什么，因为这是不同部分之间唯一的东西。

使用.filter()方法查找目标元素，然后使用其.offset() (查找其在文档中的位置)和.animate()(页面的scrollTop属性)

$('#example').bind('click',function(e) {
    e.preventDefault();
    var target = $('h1').filter(function(){ return $(this).text() == 'test' ;});
    $('html,body').animate( {
        scrollTop: target.offset().top
    });
});

在http://jsfiddle.net/Lc8gg7pm/1/演示

您甚至不需要Javascript就可以做到这一点。在h1标签之前，可以放一个锚:

<a name="scroll-to-location"></a>
<h1>test</h1>

那么你的链接应该是这样的:

<a href="#scroll-to-location">Scroll to</a>

或者您可以遵循以下SO答案:https://stackoverflow.com/a/6677069/324978

当然，对于这样一个简单的任务，你可以避免使用javascript，但如果你真的需要，你可以让它更动态，更流畅。

你的数据目标可以参考目标的id(更好)或目标的文本，如果这是你真正想要的…

<a class="inpagelink" href="#" id="example" data-target="test">Scroll to</a>

如果是一个id，目标HTML应该是这样的

<h1 id="test">some title</h1>

也可以是目标文本

<h1>test</test>

如何定位，使用jQuery:

    目标ID 

  1. $('.inpagelink').on('click', function(e){
  e.preventDefault();
  //get the targets position
  var $whereto = $('#'+ $(this).attr('data-target'));
  var gotopx = parseInt($whereto.offset().top);
  //and scroll there, in 1 sec
  $('html, body').animate({ scrollTop: gotopx }, 1000);
});
    2. 目标文本

  2. $('.inpagelink').on('click', function(e){
  e.preventDefault();
  //get the targets position
  var $whereto = $('h1:contains(' + $(this).attr('data-target') + ')');
  var gotopx = parseInt($whereto.offset().top);
  //and scroll there, in 1 sec
  $('html, body').animate({ scrollTop: gotopx }, 1000);
});

:contains是区分大小写的，所以请记住。

如果我理解正确，你有一些HTML，你不能改变(因为它是生成的)，但你希望能够通过一个超链接跳转到某些部分，即使HTML没有锚。

你可以试着看看生成的代码是否有带有id的标签，你可以像使用锚一样使用它们。

如果生成的部分也没有id，您可以遍历所有<h1>并为它们分配id，或者在页面加载后简单地添加锚，如果这不会破坏生成的代码。像这样:

var headings = document.getElementsByTagName('H1');
for (var x=0;x<headings.length;x++) {
  headings[x].id=headings[x].innerHTML;
}

JSFiddle

我希望我正确理解了你的情况。

不能帮你滚动，但要找到值:

var jsondata = {value: "whatever value you want"};
$('#example').bind('click', jsondata, function(e) {
    $('h1').each(function() {
        if ($(this).val() == jsondata.value) {
            $('body').scrollTo($(this)); //never used this before, but can't see why it wouldn't work.
        }
    }
}

我认为这是正确的:)它确实假设你的h1有一个值标签，如:

<h1 value='test'>test</h1>
相关文章：