दिए गए एंकर को HTML पेज कैसे स्क्रॉल करें?

Question

मैं केवल जावास्क्रिप्ट का उपयोग करके किसी दिए गए एंकर को पृष्ठ स्क्रॉल करने के लिए ब्राउज़र बनाना चाहता हूं।

मैं एक निर्दिष्ट किया है nameया idमेरी एचटीएमएल कोड में विशेषता:

 <a name="anchorName">..</a>

या

 <h1 id="anchorName2">..</h1>

मैं उसी प्रभाव को प्राप्त करना चाहूंगा जैसे आप नेविगेट करने से प्राप्त करेंगे http://server.com/path#anchorName। पृष्ठ को स्क्रॉल किया जाना चाहिए ताकि लंगर पृष्ठ के दृश्य भाग के शीर्ष के पास हो।

Answer 1

function scrollTo(hash) {
    location.hash = "#" + hash;
}

कोई jQuery की आवश्यकता नहीं है!

Comments

हालांकि यह वास्तव में स्क्रॉल नहीं करता है, यह सिर्फ कूदता है। उस बिंदु पर आप एंकर के साथ बस लिंक कर सकते हैं<a href="#anchorName">link</a>

— रेयान

ध्यान दें कि यह केवल एक बार काम करेगा। एक बार हैश सेट होने के बाद, पेज एक ही हैश तक स्क्रॉल नहीं करेगा, जब तक कि आप इसे डमी में नहीं बदलते तब इसे फिर से सेट करें।

— क्रिस्टियन Vrabie

आपको स्क्रॉलटो का उपयोग नहीं करना चाहिए, क्योंकि यह पहले से ही वैश्विक विंडो ऑब्जेक्ट द्वारा उपयोग किया जाता है। इसके अलावा पैरामीटर को हैश का नाम नहीं दिया जाना चाहिए, क्योंकि स्थान। आप इस कोड का उपयोग कर सकते हैं:function scrollToHash(hashName) { location.hash = "#" + hashName; }

— मार्कस ज़ेलर

@MarkusZeller, पैरामीटर को हैश क्यों नहीं कहा जाना चाहिए? यह स्थान से टकराता नहीं है, क्या यह करता है?

— घुमर

यह स्क्रॉल करता है यदि आप "स्क्रॉल-व्यवहार: सुचारू" सेट करते हैं; html तत्व पर

— स्टेकरर्स

Answer 2

आसान तरीका:

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();

Comments

मुझे पहले लगा कि मैंडेक्स ट्रोल कर रहा है, फिर मैंने यह कोशिश की और यह काम कर गया। इससे पहले कि मैं इस तरीके से पहले कभी नहीं आया। इस विधि के लिए मोज़िला डॉक्स । इसके अलावा, ऐसा लगता है कि यह ब्राउज़रों में बहुत अच्छी तरह से समर्थित होगा।

— जोनाथन ड्यूमाइन

मैं jquery समाधान स्क्रॉल नहीं कर रहा हूँ के साथ मुद्दों का एक बहुत कुछ किया है। इससे मुझे बहुत निराशा हुई।

— न्यूक्लियरपॉन

चेतावनी! इस पद्धति में समस्याएँ हो सकती हैं यदि इसके ऊपर एक div में फ़्लोटिंग तत्व होते हैं और आसानी से इसका आकार निर्धारित नहीं कर सकता है।

— वोगोमैटिक्स

यह एक साफ समाधान है, हालांकि अब तक यह किसी भी तरह की ट्विकिंग की अनुमति नहीं देता है, यह एक कठिन स्क्रॉल करता है। एक प्रायोगिक पैरामीटर scrollIntoViewOptionsहै जिसमें एक behavior: "smooth"विकल्प है, लेकिन यह वर्तमान में केवल फ़ायरफ़ॉक्स के साथ संगत है।

— रोज़

इसे कैसे चेतन करें?

— SkuraZZ

Answer 3

आप jQuery का उपयोग कर सकते हैं .animate () , .offset () और scrollTop। पसंद

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

उदाहरण लिंक: http://jsbin.com/unasi3/edit

आप चेतन उपयोग करने के लिए नहीं करना चाहते हैं .scrollTop () की तरह

$(document.body).scrollTop($('#anchorName2').offset().top);

या javascripts मूल निवासी की location.hashतरह

location.hash = '#' + anchorid;

Comments

जहाँ तक चयनकर्ता बनाने के लिए <h1 id="anchorName">या a <a name="anchorName">, का उपयोग करने $('#'+hash+',a[name='+hash+']')या थोड़ा अनुकूलित करने के लिए, $(document.getElementById(hash) || 'a[name='+hash+']')जो पहले id द्वारा तत्व की खोज करेगा, और यदि कोई नहीं मिला है तो केवल खोज करने का सहारा लेगा।

— गर्नफ

@gnarf - jQuery में '#' चयनकर्ताओं को अनुकूलित करने की कोई आवश्यकता नहीं है - वे आपके लिए पहले से ही अनुकूलित हैं। यह देखना काफी आसान है कि क्या आपने jQuery स्रोत कोड पढ़ा है।

— कोडजॉव

@CodeJoust - मैं jQuery टीम पर हूं, मैंने इसे कई बार पढ़ा है, और हाँ $("#selector")अनुकूलित है लेकिन $("#selector,a[name='selector']")जल्दी से एक ही अनुकूलन के माध्यम से नहीं जाएगा। मुझे लगता है कि मेरी 2.5 साल पुरानी टिप्पणी थोड़ी अजीब है। "ऑप्टिमाइज़ेशन" a[name='selector']खोज को टाल रहा है यदि वह आईडी ढूंढता है, तो आईडी की खोज का अनुकूलन नहीं करता है।

— गनरफ

इस दृष्टिकोण के साथ मुझे कुछ किस्मत मिली: <a data-hash="about"> अब </a> <script> $ ("[data-hash]")। क्लिक करें (फ़ंक्शन () {var data = $ (यह) .attr ("data-hash"); $ (document.body) .animate ({'स्क्रॉलटॉप': $ ("#" + डेटा) .offset ()। टॉप}, 500);}); </ script>

— Jazzy

Answer 4

JAndy द्वारा महान समाधान, लेकिन चिकनी स्क्रॉल फ़ायरफ़ॉक्स में काम करने में समस्या हो रही है।

इसे इस तरह लिखना फ़ायरफ़ॉक्स में भी काम करता है।

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

Comments

नवीनतम Chrome रिलीज़ में यह एकमात्र तरीका है जो मैंने पाया है कि लगातार काम करता है। पारितोषिक के लिए धन्यवाद!

— 9

Answer 5

2018-2020 शुद्ध जेएस:

तत्व को स्क्रॉल करने का एक बहुत ही सुविधाजनक तरीका है:

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।

विधि के बारे में अधिक

Comments

यह समाधान बहुत अच्छी तरह से काम करता है! साझा करने के लिए धन्यवाद!

— जाबोर

Answer 6

JQuery के बिना एक शुद्ध जावास्क्रिप्ट समाधान। क्रोम और Ie पर परीक्षण किया गया, IOS पर परीक्षण नहीं किया गया

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

डेमो: https://jsfiddle.net/jd7q25hg/12/

Comments

एक पुराने विषय पर टिप्पणी करने के लिए क्षमा याचना लेकिन यह मेरे लिए सबसे अच्छा काम करता है क्योंकि मेरी परियोजना JQuery का उपयोग नहीं कर रही है। केवल मैंने देखा कि मुद्दा यह है कि यह 5 पिक्सेल से छूट जाता है या यदि आप बहुत ऊपर तक स्क्रॉल करते हैं।

— AntBirch

शुद्ध js संस्करण देखने के लिए बहुत ताज़ा है। मैं छात्रों को हमेशा हुड के नीचे देखना सिखाता हूं और समझता हूं कि JQuery उनके लिए क्या करता है, इसलिए यह एक अच्छा उदाहरण है।

— डेव एवरिट

यह स्वीकृत उत्तर होना चाहिए: यह एक शुद्ध js उदाहरण है और यह वांछित स्क्रॉल एनीमेशन प्रभाव को प्राप्त करता है। मैंने टाइमआउट मान को 20 तक समायोजित किया और यह त्रुटिपूर्ण रूप से काम करता है।

— मार्क बैरासो

धन्यवाद, मुझे शुद्ध जावास्क्रिप्ट समाधान पसंद हैं

— R01010010

IOS में काम करता है सिर्फ यह परीक्षण किया।

— डेबी कुर्थ

Answer 7

2018 में, आपको इस तरह से कुछ सरल करने के लिए jQuery की आवश्यकता नहीं है। अंतर्निहित scrollIntoView()विधि behaviorपृष्ठ पर किसी भी तत्व को आसानी से स्क्रॉल करने के लिए एक " " संपत्ति का समर्थन करती है । आप इसे बुकमार्क करने के लिए हैश के साथ ब्राउज़र URL को अपडेट भी कर सकते हैं।

HTML बुकमार्क्स को स्क्रॉल करने के इस ट्यूटोरियल से , आपके पृष्ठ के सभी एंकर लिंक पर स्वचालित रूप से चिकनी स्क्रॉलिंग जोड़ने का एक मूल तरीका है:

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()
    })
}

Comments

उत्कृष्ट उत्तर जो jQuery पर निर्भरता को दूर करता है

— zai chang

वाह! कमाल का काम करता है!

— अलेक्जेंड्रू ट्रैंडाफिर कैटालिन

Answer 8

धीरे-धीरे उचित स्थिति पर स्क्रॉल करें (2019)

हो जाओ सही 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'});

Comments

मुझे लगता है कि आपको सीएसएस शैली फ़ाइल में निम्नलिखित जोड़ना चाहिए: css html { scroll-behavior: smooth; }

— parismiguel

Answer 9

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

Answer 10

CSS-Tricks से समाधान अब 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;
    }
  }
 });
});

Answer 11

अधिकांश उत्तर अनावश्यक रूप से जटिल हैं।

यदि आप लक्ष्य तत्व पर कूदना चाहते हैं , तो आपको जावास्क्रिप्ट की आवश्यकता नहीं है:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

यदि आप एनिमेटेड रूप से लक्ष्य पर स्क्रॉल करना चाहते हैं , तो कृपया @ शाहिल के उत्तर को देखें।

Comments

कभी-कभी, आपको इसे गतिशील रूप से करने की आवश्यकता होती है, हालांकि; यानी, उपयोगकर्ता की कोई सीधी कार्रवाई के माध्यम से। मेरा मानना ​​है कि ओपी चाहता है।

— jpaugh

हां, स्पष्ट रूप से ओपी को पहले से ही एंकर लिंक कार्यक्षमता के बारे में पता था।

— isherwood

Answer 12

यह काम:

$('.scroll').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

केवल चेतन करने के लिए किसी भी लिंक पर कक्षा 'स्क्रॉल' जोड़ें

Comments

अच्छा, समाधान का उपयोग करने के लिए सरल। धन्यवाद!

— स्मिट्टी-वेर्बन-जार्ज-मैनजेंसन

Answer 13

यह एक वर्किंग स्क्रिप्ट है जो पेज को एंकर तक स्क्रॉल करेगी। सेटअप करने के लिए बस एंकर लिंक को एक आईडी दें जो उस एंकर के नाम की विशेषता से मेल खाता हो जिसे आप स्क्रॉल करना चाहते हैं।

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

Answer 14

मुझे पता है कि यह प्रश्न वास्तव में पुराना है, लेकिन मुझे सीएसएस-ट्रिक्स में एक आसान और सरल 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;
      }
    }
  });
});

Comments

चयनकर्ता 2.2.0 jquery में एक अपवाद फेंक रहा है। 0x800a139e - जावास्क्रिप्ट रनटाइम त्रुटि: सिंटैक्स त्रुटि, अपरिचित अभिव्यक्ति: एक [href * = #]: नहीं ([href = #])

— बिल शिहारा

Answer 15

jQuery("a[href^='#']").click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( jQuery(this).attr('href') ).offset().top
    }, 1000);
    return false;
});

Answer 16

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

Answer 17

किसी दिए गए एंकर को पेज स्क्रॉल करने के लिए ब्राउज़र बनाने का सबसे आसान तरीका आपकी शैली में टाइप करना है। * * स्क्रॉल-व्यवहार: चिकनी;} और अपने HTML नेविगेशन में #NameOfTheSection का उपयोग करें

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