Cuộn/Chuyển đến id mà không cần jQuery

Tôi đã tìm kiếm rất nhiều chủ đề cho một giải pháp có thể sử dụng.
Nhưng không tìm thấy cái gì. Hầu hết các kịch bản chỉ là quá lộn xộn cho mục đích của tôi.
Tìm kiếm giải pháp chỉ dựa trên Javascript. Trong dự án của tôi, bạn không thể sử dụng jQuery.
Tôi cần một bước nhảy hoặc di chuyển đến id.
Cuộn/Chuyển đến id mà không cần jQuery

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

cuộc gọi của tôi là:

<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>

Vì vậy, tôi phải sử dụng sự kiện onclick trong việc điều khiển của tôi.

Bây giờ onclick tôi muốn nhảy hoặc di chuyển đến một id div trong trang của tôi:

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

Điều rất quan trọng: html neo không hoạt động không may. Nếu không thì mọi thứ sẽ khá dễ dàng.

Tôi có sử dụng bevore đơn giản:

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

Nhưng tôi có những hạn chế trong eBay. Họ không cho phép mã đơn giản này.

Ngoài ra tôi không thể gọi javascript bên ngoài (chỉ sử dụng JS trong vùng đầu). Hơn nữa, không thể sử dụng: "cookie", "cookie", "thay thế (", IFRAME, META hoặc bao gồm) và base href.

Không khó với một chút JS nhảy đến một điểm cụ thể. Tôi không cần các hiệu ứng đặc biệt.

Có ai có giải pháp gọn gàng và hữu ích không?

Tôi đã tìm thấy một giải pháp do chính tôi và cảm ơn Oxi. Tôi theo cách của bạn .

Đối với tất cả những người quan tâm trong giải pháp của tôi:

<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>

Bây giờ bạn có thể nhảy đến một div với gọi ID

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

Nguồn

2012-11-07 user1805546

chính xác ý bạn là gì bởi "neo html không hoạt động" - bạn đã triển khai nó như thế nào ?? – Leon

trên neo href thẻ sử dụng và không onclick

<a href="#target1">asdf<a>

Và div:

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

Nguồn

2012-11-07 09:35:35 Rusty

Tôi không thể sử dụng neo – user1805546

bạn đã sử dụng thẻ neo trong html của bạn ..so đề xuất bạn. – Rusty

mã dưới đây có thể giúp bạn

var objControl=document.getElementById("divid"); 
objControl.scrollTop = objControl.offsetTop;

Nguồn

2012-11-07 09:37:30 Oxi

Nếu nó là 'document.body.scrollTop' thay vì' objControl.scrollTop'? –

@Oxi var i thiết lập trong khu vực đầu và onclick tôi sử dụng? – user1805546

@ user1805546 trong trình xử lý onclick của bạn sử dụng id của div chẳng hạn 'target1' – Oxi

Có lẽ Bạn nên cố gắng scrollIntoView.

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

Điều này sẽ cuộn đến phần tử của bạn.

Nguồn

2014-05-02 07:05:08 Aaki

Chỉ cần lưu ý: Khi sử dụng 'id', hãy đảm bảo rằng bạn không thêm nó trước bằng dấu' # '. Ví dụ, nếu bạn muốn nhảy tới một div có ID 'myDiv', thì mã sẽ là:' document.getElementById ('myDiv'). ScrollIntoView(); ' – Devner

đây là một tính năng thử nghiệm, chỉ hoạt động trên Firefox tại thời gian hiện tại https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView –

hoạt động trên chrome như trên 1-26-2017 –

câu trả lời oxi của chỉ là wrong.¹

gì bạn muốn là:

var container = document.body, 
element = document.getElementById('ElementID'); 
container.scrollTop = element.offsetTop;

dụ làm việc:

(function(){ 
    var i = 20, l = 20, html = ''; 
    while (i--){ 
    html += '<div id="DIV' +(l-i)+ '">DIV ' +(l-i)+ '</div>'; 
    html += '<a onclick="document.body.scrollTop=document.getElementById(\'DIV' +i+ '\').offsetTop">'; 
    html += '[ Scroll to #DIV' +i+ ' ]</a>'; 
    html += '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />'; 
    } 
    document.write(html); 
})();

¹ tôi đã không có đủ uy tín để nhận xét về câu trả lời của mình

Nguồn

2017-11-10 21:35:52 anonQ

nếu bạn muốn cuộn mượt mà, hãy thêm cấu hình behavior.

document.getElementById('id').scrollIntoView({ 
    behavior: 'smooth' 
});

Nguồn

2018-02-21 08:18:55 agriboz

Cuộn/Chuyển đến id mà không cần jQuery

Trả lời

Các vấn đề liên quan