javascript - 将 scrollIntoView 函数应用于 JQuery 函数

标签 javascript jquery html css

我正在使用 JQuery 显示和隐藏功能,它的工作方式就像您单击图像时会打开信息日志一样。信息日志在页面顶部打开,所以我需要在您单击页面底部的图像时将您向上滚动到内容。

我在隐藏和显示内容时使用的 JQuery:

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});

我尝试使用的 Scrolintoview 函数:

function myFunction() {
  var elmnt = document.getElementById("targetDiv");
  elmnt.scrollIntoView();
}

来自女巫的内容我正在调用这两个函数:

<a  onclick="myFunction()" class="showSingle" target="{$ID}">
    //HTML content here
</a>

在页面顶部显示我要购物的内容:

<div id="div{$ID}" class="targetDiv SlideDiv">
    //HTML content here 
</div>

我试图结合这两个 JS 函数,但只有 jQuery('.targetDiv').hide() 适合我。

最佳答案

问题是你的目标div

<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here 
</div>

有一些 id 和类 targetDivSlideDiv

document.getElementById("targetDiv") 尝试查找 ID 为 targetDiv 的元素,但您的元素没有此 ID,但它有一个类同名。

您需要按类查找元素,这可以通过以下几种方式完成:

1

var elem = document.getElementsByClassName("targetDiv")[0];

2

var elem = document.querySelector(".targetDiv");

3

var elem = $(".targetDiv")[0];

关于javascript - 将 scrollIntoView 函数应用于 JQuery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56006944/

相关文章:

html - 当用户在 jQuery Mobile 中按下 "clear search input"时,我如何附加到点击

html - 如何在不影响嵌套 div 默认大小的情况下更改 div?

javascript - 如何使用 prevAll() 更改文本框文本

javascript - ReactJS:如何在选择输入上显示占位符

javascript - 通过链接触发 Javascript 函数的看似正确的方法,不起作用

javascript - select2,如何格式化它的元素?

javascript - 通过 ajax : showing error message throws error 验证 Laravel 数组

javascript - 如何制作一个只接受时间的文本框(hh :mm)?

javascript - DisplayTag - 通过 Ajax 创建首页

javascript - Karma 无法在 Windows 上启动 PhantomJS - 错误 : spawn UNKNOWN