ব্রাউজার পৃষ্ঠার শীর্ষে কিভাবে লাফাতে হবে

Question

আমি একটি মডেল পপআপ লিখছি এবং যখন খোলা মোডাল বোতাম টিপানো হয় তখন স্ক্রিনের শীর্ষে যেতে আমার ব্রাউজারটি দরকার। JQuery ব্যবহার করে শীর্ষে ব্রাউজারটি স্ক্রোল করার কোনও উপায় আছে?

Answer 1

আপনি এটির scrollTopমতো সেট করতে পারেন :

$('html,body').scrollTop(0);

অথবা আপনি যদি শীর্ষে স্ন্যাপের পরিবর্তে কিছু অ্যানিমেশন চান:

$('html, body').animate({ scrollTop: 0 }, 'fast');

Comments

ভাল ... আমি জিকুয়ারির জন্য এটি সম্পাদন করার আগে স্ক্রোলটো প্লাগইন ব্যবহার করেছি - আপনার কোডের সাহায্যে কিছুটা কোড সংরক্ষণ করতে পারতাম ... পাঠের জন্য ধন্যবাদ ;-)

— জাথ্রাস লেখক

@ মিখাইলব্যাটসর - আপনার সিএসএস অক্ষম করুন এবং তারপরে এটি কার্যকর কিনা তা দেখুন। আপনি কীভাবে আপনার ট্যাগ htmlএবং bodyট্যাগগুলি স্টাইল করেছেন তাতে আপনার একটি সমস্যা থাকতে পারে । অন্যথায় $(window)পরিবর্তে ব্যবহার করুন।

— মার্চকে আমন্ত্রণ করুন

অ্যানিমেশন-স্ক্রোলিংয়ের জন্য সময়কাল কীভাবে যুক্ত করবেন?

— ম্যাক্সিম স্ট্রুটিনস্কি

Answer 2

অ্যানিমেশন ব্যতীত, আপনি সরল জেএস ব্যবহার করতে পারেন:

scroll(0,0)

অ্যানিমেশন সহ, নিক এর উত্তর পরীক্ষা করুন ।

Comments

এটি কি সমস্ত ব্রাউজারে সমর্থিত?

— পেসারিয়ার

scrollসিএসএসওএম স্ট্যান্ডার্ডে রয়েছে যখন scrollToমূলত ডিওএম লেভেল 0 তে সংজ্ঞায়িত হয়েছিল এবং কোনও মানের অংশ নয়। যাইহোক, CSSOM scrollToপিছনের সামঞ্জস্যের জন্য অন্তর্ভুক্ত ।

— ক্লিন্ট পাচল

আমি মনে করি scrollব্যাপকভাবে সমর্থিত। দেখুন stackoverflow.com/q/1925671/41906

— ক্লিন্ট Pachl

ধন্যবাদ। আমার ধারণা window && window.scroll(0,0);আমার ভিউ মডেলে গ্রহণযোগ্য is

— নরোডিক

Answer 3

আপনি যদি jQuery UI ডায়ালগ ব্যবহার করছেন, আপনি উইন্ডোতে স্থির অবস্থানের সাথে উপস্থিত হওয়ার জন্য কেবল মডেলটি স্টাইল করতে পারেন যাতে এটি স্ক্রোল করার প্রয়োজনকে উপেক্ষা করে পপ-আপ না করে। তা না হলে,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

কৌতুক করা উচিত।

Answer 4

আপনি এটি জাভাস্ক্রিপ্ট ছাড়াই করতে পারেন এবং কেবল অ্যাঙ্কর ট্যাগ ব্যবহার করতে পারেন? তাহলে এটি j জেএস ফ্রি অ্যাক্সেসযোগ্য হবে।

যদিও আপনি মডেলগুলি ব্যবহার করছেন, আমি ধরে নিয়েছি আপনি জেএস মুক্ত থাকার বিষয়ে চিন্তা করেন না। ;)

Comments

অ্যাঙ্কর ট্যাগ ব্যবহার করে হ্যাশ-ভিত্তিক নেভিগেশন বাধাগ্রস্থ হবে।

— টম ল্যান্ডাউ

Answer 5

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Answer 6

আমি জানি এটি পুরানো, তবে এজতে যাদের সমস্যা রয়েছে তাদের ক্ষেত্রে:

সরল জেএস: window.scrollTop=0;

দুর্ভাগ্যক্রমে, scroll()এবং scrollTo()এজতে ত্রুটি ফেলে দিন।

Answer 7

আপনি jQuery UI ডায়ালগ ব্যবহার করছেন, আপনি উইন্ডোতে স্থির অবস্থানের সাথে উপস্থিত হওয়ার জন্য কেবল মডেলটিকে স্টাইল করতে পারেন যাতে এটি স্ক্রোল করার প্রয়োজনকে উপেক্ষা করে পপ-আপ না করে। অন্যান্য

Answer 8

খাঁটি জাভাস্ক্রিপ্ট সমাধান

theId.onclick = () => window.scrollTo(top: 0)

আপনি যদি মসৃণ স্ক্রোলিং করতে চান

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })