不使用 jQuery 滚动/跳转到 id [英] Scroll / Jump to id without jQuery

查看:19
本文介绍了不使用 jQuery 滚动/跳转到 id的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我搜索了很多主题以寻找可用的解决方案.
但是没有找到.大多数脚本对于我的目的来说太混乱了.
寻求仅基于 Javascript 的解决方案.在我的项目中,无法使用 jQuery.
我需要跳转或滚动到 id.

<script type="text/javascript">//这里有go函数



我的电话是:

<a onclick="function_call+targetname"><img src="image1" alt="name1"></a><a onclick="function_call+targetname"><img src="image2" alt="name2"></a><a onclick="function_call+targetname"><img src="image3" alt="name3"></a>

所以我必须在我的导航中使用 onclick 事件.

现在点击我想跳转或滚动到我页面中的一个 div id:

一些内容

<div id="target2">一些内容</div><div id="target3">一些内容</div>

这很重要:不幸的是,html 锚无法工作.否则一切都会很容易.

我只是简单地使用了bevore:

onclick="window.location.hash='target';"

但我在 eBay 上有限制.他们不允许这种简单的代码.

我也不能调用外部 javascript(只在头部区域使用 JS).此外,不能使用:cookie."、cookie"、replace("、IFRAME、META 或包含)和 base href.

用一点 JS 跳转到特定点并不难.我不需要特效.

有没有人有一个简单而有用的解决方案?

<块引用>

我自己找到了解决方案,感谢 Oxi.我跟着你方式.

对于所有对我的解决方案感兴趣的人:

<script type="text/javascript">功能滚动(元素){var ele = document.getElementById(element);window.scrollTo(ele.offsetLeft,ele.offsetTop);} </脚本>

<块引用>

导航调用:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

<块引用>

现在你可以跳转到一个带有被调用 ID 的 div

CONTENT

解决方案

也许你应该试试 scrollIntoView.

document.getElementById('id').scrollIntoView();

这将滚动到您的元素.

I have search a lot of topics for a usable solution.
But dont found something. Most scripts are just too cluttered for my purposes.
Seeking a solution based only on Javascript. In my project it is not possible to use jQuery.
I need a jump or scroll to id.

<head>
<script type="text/javascript">
//here has to go function
</script>
</head>



MY call is:

<a onclick="function_call+targetname"><img src="image1" alt="name1"></a>
<a onclick="function_call+targetname"><img src="image2" alt="name2"></a>
<a onclick="function_call+targetname"><img src="image3" alt="name3"></a>

So i have to use onclick event in my navigation.

Now onclick i want to jump or scroll to a div id in my page:

<div id="target1">some content</div>
<div id="target2">some content</div>
<div id="target3">some content</div>

It is very important: html anchor not work unfortunately. Otherwise everything would be pretty easy.

I have use bevore simply:

onclick="window.location.hash='target';"

But i have restrictions in eBay. They dont allow this simple code.

Also I cant call an external javascript (only use JS in head area). Furthermore, it is not possible to use : "cookie.", "cookie", "replace (", IFRAME, META or includes) and base href.

It can not be hard with a bit of JS jump to a specific point. I do not need special effects.

Does anyone have a slim and helpful solution?

I Have found a solution by my self and thanks to Oxi. I follow your way.

For all those interested in my solution:

<head> <script type="text/javascript"> function scroll(element){   
var ele = document.getElementById(element);   
window.scrollTo(ele.offsetLeft,ele.offsetTop); } </script> </head>

Navigation Call:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

Now you can jump to a div with called ID

<div id="target1">CONTENT</div>

解决方案

Maybe You should try scrollIntoView.

document.getElementById('id').scrollIntoView();

This will scroll to your Element.

这篇关于不使用 jQuery 滚动/跳转到 id的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆