আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে পৃষ্ঠার শীর্ষে স্ক্রোল করব? এমনকি স্ক্রোলবারটি তাত্ক্ষণিকভাবে শীর্ষে চলে আসে এমনকি এটি কাম্য। আমি একটি মসৃণ স্ক্রোলিং খুঁজছি না।
উত্তর:
যদি আপনার অ্যানিমেট করার জন্য পরিবর্তনটির প্রয়োজন না হয় তবে আপনার কোনও বিশেষ প্লাগইন ব্যবহার করার প্রয়োজন নেই - আমি কেবল নেটিভ জাভাস্ক্রিপ্ট উইন্ডো ব্যবহার করব sc স্ক্রোলটি পদ্ধতি - 0,0 এ যাওয়ার সাথে সাথে পৃষ্ঠাটি ততক্ষণে উপরের বামে স্ক্রোল করবে ।
window.scrollTo(x-coord, y-coord);পরামিতি
window.scrollTo(0, document.body.scrollHeight);
আপনি যদি মসৃণ স্ক্রোলিং করতে চান তবে এর মতো কিছু চেষ্টা করুন:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});এটি এমন কোনও <a>ট্যাগ নেবে href="#top"এবং এটিকে শীর্ষে মসৃণ করে তুলবে।
window.pageYOffsetউইন্ডোটির সম্পত্তি হবে ̶l̶e̶m̶e̶n̶t̶ অবজেক্ট।
শীর্ষে স্ক্রোল করার চেষ্টা করুন
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>মসৃণ অ্যানিমেশন সহ আরও ভাল সমাধান:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });তথ্যসূত্র: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrolTo# উদাহরণ
ScrollOptions(নির্দিষ্ট ব্রাউজারগুলির জন্য) পলফিল সমর্থন প্রয়োজন হতে পারে : github.com/iamdustan/smoothscrol
এটি করার জন্য আপনার jQuery দরকার নেই। একটি স্ট্যান্ডার্ড এইচটিএমএল ট্যাগ যথেষ্ট হবে ...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>এই সমস্ত পরামর্শ বিভিন্ন পরিস্থিতিতে দুর্দান্ত কাজ করে। যারা এই পৃষ্ঠার সন্ধানের মাধ্যমে খুঁজে পান, তাদের জন্যও এটি চেষ্টা করে দেখতে পারেন। JQuery, কোনও প্লাগ-ইন নেই, উপাদানটিতে স্ক্রোল করুন।
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);মসৃণ স্ক্রোল, খাঁটি জাভাস্ক্রিপ্ট:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>সম্পাদনা:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);উপরের এবং বাম মার্জিনের সাথে অন্য কোনও উপায়ে স্ক্রোল করুন:
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });animateফাংশনটির সময়কালের জন্য একটি স্ট্রিং ব্যবহার করতে পারবেন না , পরিবর্তে আপনার ব্যবহার করা উচিত: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>এইচটিএমএলে
<a href="#top">go top</a>সত্যিই অদ্ভুত: এই প্রশ্নটি এখন পাঁচ বছর ধরে সক্রিয় এবং এখনও স্ক্রোলিং সঞ্চারিত করার জন্য ভ্যানিলা জাভাস্ক্রিপ্টের কোনও উত্তর নেই ... সুতরাং আপনি এখানে যান:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)আপনি যদি চান তবে আপনি এটি কোনও ফাংশনে মুড়িয়ে রাখতে পারেন এবং এটিকে onclickঅ্যাট্রিবিউটের মাধ্যমে কল করতে পারেন । এই jsfiddle দেখুন
দ্রষ্টব্য: এটি একটি খুব প্রাথমিক সমাধান এবং সম্ভবত সবচেয়ে পারফরম্যান্ট নয়। খুব বিস্তৃত উদাহরণটি এখানে পাওয়া যাবে: https://github.com/cferdinandi/smooth-scrol
আপনি যদি মসৃণ স্ক্রোলিং করতে চান তবে দয়া করে এটি চেষ্টা করুন:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});আর একটি সমাধান হ'ল জাভাস্ক্রিপ্ট উইন্ডো scস্ক্রোলটো পদ্ধতি:
window.scrollTo(x-value, y-value);পরামিতি:
এর সাথে window.scrollTo(0, 0);খুব দ্রুত হয়
তাই আমি মার্ক উরসিনো উদাহরণটি চেষ্টা করেছিলাম, তবে ক্রোমে কিছু হয় নি
এবং আমি এটি খুঁজে পেয়েছি
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});সমস্ত 3 ব্রাউজার পরীক্ষা করা হয়েছে এবং এটি কাজ করে
আমি ব্লুপ্রিন্ট সিএসএস ব্যবহার করছি
যখন কোনও ক্লায়েন্ট "বুক নাও" বোতামটি ক্লিক করে এবং ভাড়া সময়টি নির্বাচিত না করে, ধীরে ধীরে ক্যালেন্ডারগুলি যেখানে শীর্ষে চলে যায় এবং একটি ডায়ালগ ডিভিশন খোলে যেখানে ting 2 ক্ষেত্র, 3 সেকেন্ড পরে এটি বিবর্ণ হয়
একটি অনেক এর ব্যবহারকারীদের ক্রস ব্রাউজার সামঞ্জস্যের জন্য উভয় HTML এবং শরীর ট্যাগ নির্বাচন করার প্রস্তাবনা দিই, তাই মত:
$('html, body').animate({ scrollTop: 0 }, callback);আপনি যদি একবারে কলব্যাক চালাচ্ছেন তবে এটি আপনাকে ট্রিপ করতে পারে। এটি দুটিবার চলবে কারণ আপনি দুটি উপাদান নির্বাচন করেছেন।
যদি তা আপনার পক্ষে সমস্যা হয় তবে আপনি এটির মতো কিছু করতে পারেন:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}এই কাজটি করার কারণটি ক্রোমে $('html').scrollTop()0 দেয়, তবে ফায়ারফক্সের মতো অন্য ব্রাউজারগুলিতে নয়।
যদি আপনি স্ক্রোলবারটি ইতিমধ্যে শীর্ষে থাকে সেক্ষেত্রে অ্যানিমেশনটি সম্পূর্ণ হওয়ার জন্য আপনি যদি অপেক্ষা না করতে চান তবে এটি চেষ্টা করুন:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}পুরানো #topকৌতুক করতে পারে
document.location.href = "#top";এফএফ, আইই এবং ক্রোমে সূক্ষ্মভাবে কাজ করে
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>$(document).scrollTop(0); কাজ করে।
এই কোড ব্যবহার করে দেখুন:
$('html, body').animate({
scrollTop: $("div").offset().top
}, time);div => ডোম এলিমেন্ট যেখানে আপনি স্ক্রোল সরাতে চান।
সময় => মিলিসেকেন্ড, স্ক্রোলটির গতি নির্ধারণ করুন।
আপনি JQuery ইনবিল্ট ফাংশন স্ক্রোলটপ ব্যবহার করবেন না কেন:
$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottomসংক্ষিপ্ত এবং সহজ!
আপনার জিকুয়ের দরকার নেই। কেবল আপনি স্ক্রিপ্ট কল করতে পারেন
window.location = '#'"উপরে যান" বোতামে ক্লিক করুন
নমুনা ডেমো:
পিএস: আপনি যখন অ্যাংুলারজগুলির মতো আধুনিক লাইব্রেরি ব্যবহার করছেন তখন এই পদ্ধতিটি ব্যবহার করবেন না। এটি ইউআরএল হ্যাশবাং ভেঙে দিতে পারে।
শীর্ষে সরাসরি স্ক্রোল করার জন্য কেবল এই স্ক্রিপ্টটি ব্যবহার করুন।
<script>
$(document).ready(function(){
$("button").click(function(){
($('body').scrollTop(0));
});
});
</script>খাঁটি জাভাস্ক্রিপ্ট সমাধান:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});আমি কোডেপেনে একটি অ্যানিমেটেড সমাধান লিখি
এছাড়াও, আপনি সিএসএস scroll-behavior: smoothসম্পত্তি সহ আরও একটি সমাধান চেষ্টা করতে পারেন ।
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}আপনি যদি মসৃণ স্ক্রোলিংটি না চান, আপনি মসৃণ স্ক্রোলিং অ্যানিমেশনটি শুরু করার সাথে সাথেই এটি প্রতারণা করতে এবং থামাতে পারেন ... যেমন:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});এটি প্রস্তাবিত / অনুমোদিত কিনা তা আমার কোনও ধারণা নেই তবে এটি কাজ করে :)
আপনি কখন এটি ব্যবহার করবেন? আমি নিশ্চিত নই, তবে সম্ভবত আপনি যখন জ্যাকুরির সাথে একটি জিনিস অ্যানিমেট করার জন্য একটি ক্লিক ব্যবহার করতে চান, তবে অ্যানিমেশন ছাড়াই অন্যটি করতে চান? অর্থাত্ পৃষ্ঠার শীর্ষে একটি স্লাইড-ইন অ্যাডমিন লগইন প্যানেলটি খুলুন এবং তা দেখার জন্য তাত্ক্ষণিকভাবে শীর্ষে যান।
এই সহজ সমাধানটি দেশীয়ভাবে কাজ করে এবং যে কোনও অবস্থানে মসৃণ স্ক্রোল প্রয়োগ করে।
এটি অ্যাঙ্কর লিঙ্কগুলি (যাদের সাথে রয়েছে #) ব্যবহার করা এড়ানো যায় যা আমার মতে, আপনি যদি কোনও বিভাগে লিঙ্ক করতে চান তবে দরকারী তবে কিছু পরিস্থিতিতে এতটা স্বাচ্ছন্দ্য বোধ করবেন না, বিশেষত শীর্ষের দিকে ইশারা করার সময় যা দুটি ভিন্ন ইউআরএলকে নির্দেশ করতে পারে একই অবস্থান ( http://www.example.org এবং http://www.example.org/# )।
আপনি যে ট্যাগটিতে স্ক্রোল করতে চান তাতে একটি আইডি রাখুন , উদাহরণস্বরূপ আপনার প্রথম বিভাগ , যা এই প্রশ্নের উত্তর দেয়, তবে আইডিটি পৃষ্ঠার যে কোনও জায়গায় রাখা যেতে পারে।
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>তারপরে একটি বোতাম হিসাবে আপনি কোনও লিঙ্ক ব্যবহার করতে পারেন, ঠিক এই জাতীয় কোড সহ অনক্লিক বৈশিষ্ট্যটি সম্পাদনা করুন ।
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>ক্লিক করার পরে আপনি যে ট্যাগটি স্ক্রোল করতে চান document.getElementByIdতার আইডি হ'ল আর্গুমেন্ট ।
আপনি সহজেই আপনার লিঙ্কটি থেকে একটি লক্ষ্য ব্যবহার করতে পারেন, যেমন # সোমিড, যেখানে # এসোমেডটি ডিভের আইডি।
অথবা, আপনি যে কোনও সংখ্যক স্ক্রোলিং প্লাগইন ব্যবহার করতে পারেন যা এটি আরও মার্জিত করে তোলে।
http://plugins.jquery.com/project/ScrollTo একটি উদাহরণ।
আপনি এই ফিডল হিসাবে জেএস ব্যবহার করার চেষ্টা করতে পারেন http://jsfiddle.net/5bNmH/1/
আপনার পৃষ্ঠা ফুটারে "উপরে যান" বোতামটি যুক্ত করুন:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>function scrolltop() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#back-to-top').fadeIn(duration);
} else {
jQuery('#back-to-top').fadeOut(duration);
}
});
jQuery('#back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
}উপরের উত্তরগুলির মধ্যে কোনওটি শেয়ারপয়েন্ট 2016 তে কাজ করবে না।
এটি এইভাবে করাতে হবে: https://sharePoint.stackexchange.com/questions/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;