আমি জাভাস্ক্রিপ্ট ব্যবহার করে কোনও প্রদত্ত নোঙ্গরে পৃষ্ঠাটি স্ক্রোল করতে ব্রাউজারটি তৈরি করতে চাই।
আমি আমার এইচটিএমএল কোডে একটি nameবা idবৈশিষ্ট্য নির্দিষ্ট করেছি:
<a name="anchorName">..</a>অথবা
<h1 id="anchorName2">..</h1>আমি নেভিগেট করে আপনি যেমন পেতেন তেমন প্রভাব পেতে চাই http://server.com/path#anchorName। পৃষ্ঠাটি স্ক্রোল করা উচিত যাতে অ্যাঙ্কর পৃষ্ঠার দৃশ্যমান অংশের শীর্ষের নিকটে থাকে।
উত্তর:
function scrollTo(hash) {
location.hash = "#" + hash;
}কোন jQuery প্রয়োজন হয় না!
function scrollToHash(hashName) { location.hash = "#" + hashName; }
উপায় সহজ:
var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();scrollIntoViewOptionsরয়েছে যার একটি behavior: "smooth"বিকল্প রয়েছে তবে এটি বর্তমানে কেবল ফায়ারফক্সের সাথেই সামঞ্জস্যপূর্ণ।
আপনি jQuerys .animate () ব্যবহার করতে পারেন , .offset () এবংscrollTop । মত
$(document.body).animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);উদাহরণ লিঙ্ক: http://jsbin.com/unasi3/edit
আপনি যদি ব্যবহার অ্যানিমেট করতে না চান .crolTop () পছন্দ করুন
$(document.body).scrollTop($('#anchorName2').offset().top);বা জাভাস্ক্রিপ্টস নেটিভ location.hashপছন্দ
location.hash = '#' + anchorid;<h1 id="anchorName">বা নির্বাচিত হিসাবে নির্বাচক তৈরি করা যায় <a name="anchorName">, ব্যবহার $('#'+hash+',a[name='+hash+']')বা কিছুটা অপ্টিমাইজড $(document.getElementById(hash) || 'a[name='+hash+']')যা প্রথমে আইডি দ্বারা উপাদানটির জন্য অনুসন্ধান করবে এবং যদি এটি না পাওয়া যায় তবে কেবলমাত্র অনুসন্ধানের জন্যই অবলম্বন করবে।
$("#selector")অনুকূলিত হয়েছে তবে $("#selector,a[name='selector']")দ্রুত একই অপ্টিমাইজেশনের মধ্য দিয়ে যাব না। আমি মনে করি আমার 2.5 বছরের পুরানো মন্তব্যটি কিছুটা অদ্ভুত শোনাচ্ছে। "অপ্টিমাইজেশন" a[name='selector']আইডিটি অনুসন্ধান করে, যদি আইডির সন্ধানকে অপ্টিমাইজ করে না তবে অনুসন্ধান এড়ানো হচ্ছে ।
জেন্ডির দুর্দান্ত সমাধান, তবে মসৃণ স্ক্রোলটিতে ফায়ার ফক্সে কাজ করার সমস্যা রয়েছে বলে মনে হচ্ছে।
এটি এইভাবে লেখা ফায়ারফক্সেও কাজ করে।
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);el.scrollIntoView({
behavior: 'smooth', // smooth scroll
block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})তবে যতদূর আমি বুঝতে পারি তার নীচের বিকল্পগুলির মতো ভাল সমর্থন নেই।
const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset
window.scrollTo({
top: topPos, // scroll so that the element is at the top of the view
behavior: 'smooth' // smooth scroll
})const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.scroll({
top: rect.top + rect.height / 2 - viewHeight / 2,
behavior: 'smooth' // smooth scroll
});সহায়তা:
তারা লিখেছে যে scrollএকই পদ্ধতি scrollTo, কিন্তু সমর্থন ভাল দেখায় scrollTo।
JQuery ছাড়াই একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান। আইওএস-তে পরীক্ষিত নয়, ক্রোম ও আইইতে পরীক্ষিত
function ScrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function() { ScrollToResolver(elem);}, "100");
} else {
elem.lastjump = null;
}
}2018 এ, এর মতো সাধারণ কিছু করার জন্য আপনার jQuery দরকার নেই। বিল্ট ইন scrollIntoView()পদ্ধতিটি "behavior পৃষ্ঠার যে কোনও উপাদানগুলিতে সহজে স্ক্রোল করার জন্য " সম্পত্তি করে। এমনকি আপনি এটি ব্রাউজারযোগ্য করে তুলতে ব্রাউজারের URL টি হ্যাশ দিয়ে আপডেট করতে পারেন।
এইচটিএমএল বুকমার্কগুলি স্ক্রোল করার এই টিউটোরিয়াল থেকে , আপনার পৃষ্ঠায় সমস্ত অ্যাঙ্কর লিঙ্কগুলিতে স্বয়ংক্রিয়ভাবে স্ক্রোলিং যুক্ত করার একটি স্থানীয় উপায়:
let anchorlinks = document.querySelectorAll('a[href^="#"]')
for (let item of anchorlinks) { // relitere
item.addEventListener('click', (e)=> {
let hashval = item.getAttribute('href')
let target = document.querySelector(hashval)
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
history.pushState(null, null, hashval)
e.preventDefault()
})
}সঠিক y সমন্বয় এবং ব্যবহার পানwindow.scrollTo({top: y, behavior: 'smooth'})
const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({top: y, behavior: 'smooth'});scrollIntoViewএটিও একটি ভাল বিকল্প তবে এটি কিছু ক্ষেত্রে পুরোপুরি কার্যকর নাও হতে পারে। উদাহরণস্বরূপ যখন আপনার অতিরিক্ত অফসেট প্রয়োজন । আপনার সাথে scrollToকেবল এটির মতো অফসেটটি যুক্ত করা দরকার:
const yOffset = -10;
window.scrollTo({top: y + yOffset, behavior: 'smooth'});css html { scroll-behavior: smooth; }
সিএসএস-ট্রিকস থেকে সমাধান আর jQuery 2.2.0 এ কাজ করে না। এটি একটি নির্বাচক ত্রুটি নিক্ষেপ করবে:
জাভাস্ক্রিপ্ট রানটাইম ত্রুটি: সিনট্যাক্স ত্রুটি, অচেনা এক্সপ্রেশন: একটি [href * = #]: না ([href = #])
আমি নির্বাচক পরিবর্তন করে এটি স্থির করেছি। পূর্ণ স্নিপেটটি হ'ল:
$(function() {
$("a[href*='#']:not([href='#'])").click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});বেশিরভাগ উত্তর অহেতুক জটিল।
আপনি যদি কেবলমাত্র লক্ষ্য উপাদানটিতে ঝাঁপিয়ে পড়তে চান তবে আপনার জাভাস্ক্রিপ্টের দরকার নেই:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>আপনি যদি অ্যানিমেটেডভাবে লক্ষ্যতে স্ক্রোল করতে চান তবে দয়া করে @ শাহিলের উত্তরটি দেখুন।
এইটা কাজ করে:
$('.scroll').on("click", function(e) {
e.preventDefault();
var dest = $(this).attr("href");
$("html, body").animate({
'scrollTop': $(dest).offset().top
}, 2000);
});https://jsfiddle.net/68pnkfgd/
আপনার সঞ্জীবিত করতে চাইলে যে কোনও লিঙ্কগুলিতে কেবল 'স্ক্রোল' শ্রেণি যুক্ত করুন
এটি একটি কার্যকারী স্ক্রিপ্ট যা পৃষ্ঠাটি অ্যাঙ্কারে স্ক্রোল করবে। সেটআপ করার জন্য কেবল অ্যাঙ্করটিকে একটি আইডি দিন যা আপনি স্ক্রোল করতে চান এমন অ্যাঙ্কারের নামের বৈশিষ্ট্যের সাথে মেলে।
<script>
jQuery(document).ready(function ($){
$('a').click(function (){
var id = $(this).attr('id');
console.log(id);
if ( id == 'cet' || id == 'protein' ) {
$('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow');
}
});
});
</script>আমি জানি এই প্রশ্নটি আসলেই পুরানো, তবে আমি সিএসএস-ট্রিক্সে একটি সহজ এবং সাধারণ jQuery সমাধান পেয়েছি । এটিই এখন আমি ব্যবহার করছি।
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});jQuery("a[href^='#']").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
}, 1000);
return false;
});একটি vue2 সমাধান ... সহজ আপডেট আপডেট করার জন্য সহজ তথ্য সম্পত্তি যুক্ত করুন
const app = new Vue({
...
, updated: function() {
this.$nextTick(function() {
var uri = window.location.href
var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
this.updater = "" // only on page-load !
location.href = "#"+String(anchor)
}
})
}
});
app.updater = "page_load"
/* smooth scrolling in css - works in html5 only */
html, body {
scroll-behavior: smooth;
}প্রদত্ত অ্যাঙ্কারে পৃষ্ঠাটি স্ক্রোল করার জন্য ব্রাউজারটি তৈরি করার সহজতম উপায় হ'ল আপনার স্টাইল। CSS * * স্ক্রোল-আচরণ: মসৃণ; in টাইপ করা এবং আপনার এইচটিএমএল নেভিগেশনে #NameOfTheSੈਕਸ਼ਨ ব্যবহার করুন
*{scroll-behavior: smooth;}<a href="#scroll-to">Home<a/>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>
<a href="#anchorName">link</a>