জাভাস্ক্রিপ্ট ডিআইভিতে দীর্ঘ পৃষ্ঠায় স্ক্রোল করতে

Question

একটি দীর্ঘ HTML পৃষ্ঠায় আমার একটি লিঙ্ক আছে। আমি যখন এটি ক্লিক করি, divতখন পৃষ্ঠার অন্য একটি অংশটি ভিউতে স্ক্রোল করে উইন্ডোতে দৃশ্যমান হোক।

EnsureVisibleঅন্য ভাষার মতো কিছুটা ।

আমি চেক আউট করেছি scrollTopএবং scrollToতবে এগুলি লাল হেরিংগুলির মতো মনে হচ্ছে।

কেউ সাহায্য করতে পারেন?

Answer 1

পুরানো প্রশ্ন, তবে যদি কেউ গুগলের মাধ্যমে এটি খুঁজে পায় (যেমনটি আমি করেছি) এবং কে অ্যাঙ্কর বা jquery ব্যবহার করতে চায় না; কোনও উপাদানটিতে 'লাফ' দেওয়ার জন্য একটি অন্তর্নিহিত জাভাস্ক্রিপ্ট ফাংশন রয়েছে;

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

এবং আরও ভাল কি; কুইর্কসমোডে দুর্দান্ত সামঞ্জস্যতা-সারণী অনুসারে, এটি সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত !

Comments

মোটেও কোনও মসৃণ স্ক্রোল নয় (অন্তত ফায়ারফক্সে) তবে তৃতীয় পক্ষের কোনও সামগ্রী ছাড়াই কোডের এক লাইনের সাথে এটি কাজ করে। খুশী হলাম।

— ম্যাট্রিক্সফ্রগ

অন্তর্নির্মিত স্ক্রোলটি দেখার ক্ষেত্রে সমস্যাটি হ'ল লম্বা পৃষ্ঠার দিকে তাকানোর সময়, আপনি পৃষ্ঠাটি স্ক্রোল করার সময় ব্যবহারকারী হারিয়ে যেতে পারে। আমি এই কার্যকারিতাটির একটি অ্যানিমেটেড সংস্করণ লিখেছি যা কেবলমাত্র প্রয়োজন হলে পাত্রে স্ক্রোল করে এবং এটি অ্যানিমেশন সহ করে যাতে ব্যবহারকারী আসলে কী ঘটতে পারে তা দেখতে পায়। এটি পরে একটি সম্পূর্ণ ফাংশন চালাতে পারে। এটি আপনাকে স্ক্রোলযোগ্য পূর্বপুরুষ সরবরাহ করতে হবে না এমন ব্যতিক্রম সহ স্ক্রোলটো jQuery প্লাগইনের মতো । এটি স্বয়ংক্রিয়ভাবে এটি অনুসন্ধান করে।

— রবার্ট কোরিটনিক

@ রবার্ট, দুর্দান্ত লাগছে। আপনি কি একটি লিঙ্ক সরবরাহ করতে পারেন বা সম্ভবত কোনও উত্তর সরবরাহ করতে পারেন যা কোডটি অন্তর্ভুক্ত করে?

— কার্ক ওল

এর সরলতা দুর্দান্ত।

— মিনম্যাট

অ্যানিমেশন বা মসৃণ স্ক্রোল খুঁজছেন লোকদের জন্য:document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });

— খলিল লালেহ

Answer 2

আপনি যদি অতিরিক্ত এক্সটেনশন যুক্ত করতে না চান তবে নীচের কোডটি jQuery এর সাথে কাজ করা উচিত।

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Answer 3

জিকুয়েরি স্ক্রোলটো সম্পর্কে কীভাবে - এই নমুনা কোডটি দেখুন

Comments

জিকুয়ারি কি জাভাস্ক্রিপ্ট নয় বা আমরা কি স্ক্র্যাচ থেকে সমস্ত লাইব্রেরি লিখতে চাই? আমার প্রশ্নটি পড়ার বিষয়টি ছিল কীভাবে একটি নির্দিষ্ট বৈশিষ্ট্যটি প্রয়োগ করা যায়, সম্ভবত তিনি প্রযুক্তিগত বিশদ জানতে চাইতেন তবে আপনি জানেন না যে আমি ছাড়া আর কোনও কিছু নেই।

— জর্জ মাউয়ার

@ জর্জন টিপলিং - যদি তিনি এখানে জাভাস্ক্রিপ্ট দেখতে চান তবে এটি ডেমোস.ফ্লেজার

— নরম্যান এইচ

Answer 4

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

কোনও অভিনব স্ক্রোলিং নয় তবে এটি আপনাকে সেখানে নিয়ে যাওয়া উচিত।

Comments

প্রশ্নটি একই জিনিসটি সম্পাদনের জন্য জাভাস্ক্রিপ্টের জন্য জিজ্ঞাসা করেছিল।

— স্কট সুইজে

পিটার বাফটনের উত্তরটি স্ট্যাকওভারফ্লো . com / জিজ্ঞাসা / 696469 in64 এ দেখুন - নামকরণকৃত অ্যাঙ্করগুলি ব্যবহার না করে ডিআইডিকে একটি আইডি প্রদান একই কাজ করে তবে এর চেয়ে অনেক বেশি ভাল শব্দার্থক অর্থ রয়েছে এবং এতে কম মার্কআপ প্রয়োজন।

— নিকফ

স্কট এস হিসাবে নীচে নির্দেশিত: ডকুমেন্ট.লোকেশন.হ্যাশ = "মাইআঞ্চার";

— অ্যারন ওয়াটার্স

Answer 5

স্ক্রোলিংয়ের সাথে অসুবিধাটি হ'ল আপনাকে কেবল একটি ডিভিটি দেখানোর জন্য পৃষ্ঠাটি স্ক্রোল করার প্রয়োজন হতে পারে না, তবে আপনার কয়েকটি স্তরের স্ক্রোলযোগ্য ডিভের ভিতরেও স্ক্রোল করতে হতে পারে।

স্ক্রোলটপ সম্পত্তি ডকুমেন্ট বডি সহ যে কোনও ডিওএম উপাদানগুলিতে উপলব্ধ। এটি সেট করে আপনি নিয়ন্ত্রণ করতে পারেন যে কতটা নিচে স্ক্রল করা আছে। আপনি কত স্ক্রোলিং প্রয়োজন তা দেখতে ক্লায়েন্টহাইট এবং স্ক্রোলহাইট বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন (যখন ক্লায়েন্টহাইট (ভিউপোর্ট) স্ক্রোলহাইট (সামগ্রীর উচ্চতা) এর চেয়ে কম হয় তখন স্ক্রোলিং সম্ভব।

ধারকটিতে কোন উপাদানটি রয়েছে তা নির্ধারণের জন্য আপনি অফসেটটপ সম্পত্তিটি ব্যবহার করতে পারেন।

স্ক্র্যাচ থেকে একটি সত্যিকারের সাধারণ উদ্দেশ্য "দেখুন" স্ক্রোল করুন "র জন্য, আপনি যে নোডটি প্রকাশ করতে চান তা শুরু করতে হবে, এটি তার পিতামাতার দৃশ্যমান অংশে রয়েছে কিনা তা নিশ্চিত করুন, তারপরে পিতামাতার জন্য একই পুনরাবৃত্তি করুন, ইত্যাদি, সমস্ত আপনি শীর্ষে পৌঁছানো পর্যন্ত উপায়।

এর এক ধাপে এরকম কিছু দেখতে পাওয়া যাবে (অরক্ষিত কোড, প্রান্তের কেসগুলি পরীক্ষা করা হচ্ছে না):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Answer 6

Element.scrollIntoView()উপরে বর্ণিত পদ্ধতি অনুসারে আপনি পদ্ধতিটি ব্যবহার করতে পারেন । যদি আপনি এটি কোনও প্যারামিটারের ভিতরে না রেখে থাকেন তবে আপনার তাত্ক্ষণিক কুরুচিপূর্ণ স্ক্রোল থাকবে । এটি রোধ করতে আপনি এই প্যারামিটারটি যুক্ত করতে পারেন - behavior:"smooth"।

উদাহরণ:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

কোনও ওয়েবসাইটে scroll-here-plzআপনার divবা উপাদানটির সাথে কেবল প্রতিস্থাপন করুন। এবং যদি আপনি আপনার উইন্ডোর নীচে আপনার উপাদানটি দেখতে পান বা অবস্থানটি আপনার প্রত্যাশা মতো নয়, তবে প্যারামিটার দিয়ে খেলুন block: ""। আপনি ব্যবহার করতে পারেন block: "start", block: "end"বা block: "center"।

মনে রাখবেন: সর্বদা কোনও বস্তুর ভিতরে প্যারামিটার ব্যবহার করুন}}।

যদি আপনার এখনও সমস্যা হয় তবে https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView এ যান

এই পদ্ধতির জন্য বিশদ ডকুমেন্টেশন রয়েছে।

Answer 7

এটি আমার পক্ষে কাজ করেছে

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

Answer 8

উত্তর এখানে পোস্ট করুন - আপনার সমস্যার একই সমাধান।

সম্পাদনা করুন: আপনি যদি একটি মসৃণ স্ক্রোল চান তবে জিকুয়ারি উত্তরটি খুব সুন্দর - আমি এটি আগে দেখিনি।

Answer 9

নামী নোঙ্গর কেন নয়?

Comments

হি ... আমি একটি জাভাস্ক্রিপ্ট সমাধান পোস্ট করতে শুরু করেছি, এবং তারপরে আপনার পড়ি ... এবং আমাকে চড় মারল। চমৎকার কাজ! :-)

— শোগ 9

Answer 10

আপনার প্রয়োজনীয় সম্পত্তি হ'ল লোকেশন location উদাহরণস্বরূপ:

অবস্থান.hash = 'শীর্ষ'; // নাম দেওয়া অ্যাঙ্কর "শীর্ষে লাফিয়ে যাবে

আমি জানি না যে কীভাবে ডোজো বা এর মতো কিছু সরঞ্জামদণ্ড ব্যবহার না করে সুন্দর স্ক্রোল অ্যানিমেশনটি করা যায় তবে আপনার যদি কোনও অ্যাঙ্কারে ঝাঁপিয়ে পড়ার দরকার হয় তবে লোকেশন.হ্যাশটি এটি করা উচিত।

(এফএফ 3 এবং সাফারি 3.1.2 এ পরীক্ষিত)

Comments

দুর্দান্ত সহজ সমাধান ...

— আই

এটি এখন পর্যন্ত সেরা উত্তর; এটি সহজ, নির্ভরযোগ্য এবং কোনও লাইব্রেরির প্রয়োজন নেই। +1

Answer 11

উপরের ফুট্টার জবাবটিতে আমি কোনও মন্তব্য যুক্ত করতে পারি না, তবে একটি মসৃণ স্ক্রোল ব্যবহারের জন্য:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

Comments

ক্রোমে নিখুঁত কাজ করে। ধন্যবাদ!

— আল বেলমন্ডো

Answer 12

স্ক্রোলটপ (আইআইআরসি) হ'ল ডকুমেন্টে পৃষ্ঠার শীর্ষে স্ক্রোল করা আছে। স্ক্রোলটো পৃষ্ঠাটি স্ক্রোল করে যাতে পৃষ্ঠার শীর্ষে যেখানে আপনি নির্দিষ্ট করেন সেখানে।

আপনার এখানে যা দরকার তা হ'ল কয়েকটি জাভাস্ক্রিপ্ট ম্যানিপুলেটেড শৈলী। বলুন আপনি যদি ডিভ অফ-স্ক্রিনটি চান এবং ডান দিক থেকে স্ক্রল করে আপনি পৃষ্ঠার প্রস্থে ডিভের বাম বৈশিষ্ট্য নির্ধারণ করবেন এবং আপনি যেখানে চান সেখানে প্রতি সেকেন্ডে সেট পরিমাণ দ্বারা এটি হ্রাস করবেন decrease

এটি আপনাকে সঠিক দিকে নির্দেশ করবে।

অতিরিক্ত: আমি দুঃখিত, আমি ভেবেছিলাম আপনি অন্য কোথাও থেকে 'পপ আউট' করতে আলাদা ডিভ চেয়েছিলেন (এই সাইটের মতো কখনও কখনও করা হয়), এবং পুরো পৃষ্ঠাটি কোনও বিভাগে না সরানো। অ্যাঙ্করগুলির যথাযথ ব্যবহার সেই প্রভাব অর্জন করবে।

Answer 13

কোনও ডিওএম উপাদানটিতে স্ক্রোল করার সাধারণ ক্ষেত্রে একটি jQuery প্লাগইন রয়েছে , তবে যদি পারফরম্যান্সটি কোনও সমস্যা হয় (এবং কখন তা নয়?), আমি নিজেই এটি করার পরামর্শ দিই। এর মধ্যে দুটি পদক্ষেপ জড়িত:

1. আপনি যে উপাদানটিতে স্ক্রোল করছেন তার অবস্থান সন্ধান করা।
2. সেই অবস্থানে স্ক্রোলিং

Quirksmode প্রাক্তন পিছনে প্রক্রিয়া একটি ভাল ব্যাখ্যা দেয়। এখানে আমার পছন্দসই সমাধান:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

এটি নাল থেকে 0 পর্যন্ত ingালাই ব্যবহার করে যা কিছু চেনাশোনাগুলিতে উপযুক্ত শিষ্টাচার নয়, তবে আমি এটি পছন্দ করি) দ্বিতীয় অংশটি ব্যবহার করে window.scroll। সুতরাং সমাধানের বাকি অংশটি হ'ল:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

ভাল খবর!

Comments

আপনি প্রথম প্যারামিটার - উইন্ডো.স্ক্রোল (0, পরমঅফসেট (এলেম)) সেট করতে ভুলে গেছেন;

— রিচার্ড

Answer 14

আমি ব্যক্তিগতভাবে জোশের jQuery- ভিত্তিক উত্তরটি আমি দেখতে পেয়েছি সেরা হিসাবে খুঁজে পেয়েছি এবং আমার অ্যাপ্লিকেশনটির জন্য নিখুঁতভাবে কাজ করেছি ... অবশ্যই, আমি ইতিমধ্যে jQuery ব্যবহার করছিলাম ... আমি অবশ্যই পুরো জেকিউ লাইব্রেরিটি কেবল তার জন্য অন্তর্ভুক্ত না করতাম এক উদ্দেশ্য

চিয়ার্স!

সম্পাদনা: ঠিক আছে ... এটি পোস্ট করার ঠিক কয়েক সেকেন্ড পরে, আমি আমার ঠিক নীচে আরেকটি উত্তর দেখতে পেয়েছি (নিশ্চিত না যে এটি সম্পাদনার পরেও আমার নীচে রয়েছে কিনা) যা ব্যবহার করতে বলেছে:

document.getElementById ( 'your_element_ID_here') scrollIntoView ()।

এটি jQuery সংস্করণের তুলনায় পুরোপুরি এবং এত কম কোডে কাজ করে! আমার কোনও ধারণা ছিল না যে জেএস-তে একটি অন্তর্নির্মিত ফাংশন রয়েছে .crolIntoView () নামে পরিচিত, তবে এটি সেখানে রয়েছে! সুতরাং, আপনি যদি অভিনব অ্যানিমেশন চান, jQuery যান। দ্রুত এন 'নোংরা ... এটি ব্যবহার করুন!

Answer 15

মসৃণ স্ক্রোলের জন্য এই কোডটি কার্যকর

$('a[href*=#scrollToDivId]').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) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Answer 16

আমি ভুল হলে আমাকে সংশোধন করুন কিন্তু আমি বারবার প্রশ্নটি পড়ছি এবং এখনও মনে করি অ্যাঙ্গাস ম্যাককোটআপ কীভাবে কোনও উপাদানকে অবস্থান হিসাবে স্থির করতে হবে তা স্থির করে: ঠিক করা হয়েছে asking

অ্যাঙ্গাস ম্যাককোটআপ, http://www.cssplay.co.uk/layouts/fixed.html দেখুন - আপনি যদি নিজের ডিআইভি সেখানে মেনুর মতো আচরণ করতে চান তবে সেখানে একটি সিএসএস দেখুন have